/* ============================================================================
   KINGSHOT TOOLBOX - FEUILLE DE STYLE PRINCIPALE
   ============================================================================
   
   Structure :
   1.  Variables (thèmes dark/light)
   2.  Reset & Base
   3.  App Header (partagé)
   4.  Layout Calculateurs (sidebar + main)
   5.  Hub (page d'accueil)
   6.  Contrôles (inputs, checkbox, control-group)
   7.  Panels & Result Box
   8.  Tables
   9.  Tabs (Research)
   10. Dashboard Cards (Research)
   11. Tree Layout (Research)
   12. Layout Toggle (Research)
   13. Boutons
   14. Legacy / Compatibilité
   15. Responsive (Mobile)
   ============================================================================ */


/* ============================================================================
   1. VARIABLES DE THÈME — ROYAL GOLD "BLACK EDITION"
   ============================================================================
   
   Inspiration : codes du luxe (Rolex, Versace, Lamborghini)
   - Or éclatant sur noir profond = sophistication maximale
   - Touches d'émeraude pour la validation
   - Touches de rubis pour les alertes
   ============================================================================ */

:root {
    /* Fonds — Noirs profonds */
    --bg-dark:       #0a0a0a;      /* Noir profond (fond principal) */
    --bg-panel:      #161616;      /* Noir charbon (panels) */
    --control-bg:    #1f1f1f;      /* Noir anthracite (contrôles) */
    --input-bg:      #252525;      /* Gris très foncé (inputs) */
    
    /* Textes */
    --text-light:    #f0e8d5;      /* Ivoire chaud (texte principal) */
    --text-muted:    #8a8378;      /* Beige grisé (texte secondaire) */
    
    /* Accent principal — OR ROYAL */
    --accent:        #f5b840;      /* Or éclatant */
    --accent-hover:  #d49820;      /* Or foncé au hover */
    
    /* Bordures */
    --border:        #2a2a2a;      /* Gris foncé subtil */
    
    /* Couleurs sémantiques */
    --success:       #4ecdc4;      /* Turquoise (validation) */
    --warning:       #ff8c42;      /* Orange ambré (alerte) */
    
    /* Tableaux */
    --table-header:  #1c1c1c;      /* Noir charbon pour entêtes */
    --table-row-alt: #131313;      /* Alternance ultra subtile */
    
    /* Couleurs d'arbres (Research) */
    --growth-color:  #4ecdc4;      /* Turquoise — Croissance */
    --eco-color:     #f5b840;      /* Or — Économie */
    --battle-color:  #e74c5c;      /* Rubis — Combat */
    
    /* Composants Tree */
    --box-bg:        #1c1c1c;      /* Cartes de recherche */
    --box-header:    #252525;      /* Entêtes de cartes */
    --step-bg:       #161616;      /* Étapes de recherche */
    --step-hover:    #202020;      /* Hover sur étapes */
    
    /* Ombres — plus marquées pour effet "or qui flotte" */
    --shadow:        rgba(0, 0, 0, 0.6);
    
    /* Constantes de layout */
    --header-height: 60px;
    --header-offset: 80px;
}

[data-theme="light"] {
    /* Fonds — Crème & blancs */
    --bg-dark:       #f5f7fb;      /* Crème très pâle (fond) */
    --bg-panel:      #ffffff;      /* Blanc pur (panels) */
    --control-bg:    #f0f4fa;      /* Crème pâle (contrôles) */
    --input-bg:      #ffffff;      /* Blanc (inputs) */
    
    /* Textes */
    --text-light:    #1a1a1a;      /* Noir doux (texte principal) */
    --text-muted:    #6b7280;      /* Gris moyen */
    
    /* Accent principal — OR ANTIQUE (meilleur contraste sur clair) */
    --accent:        #c89020;      /* Or antique */
    --accent-hover:  #a07418;      /* Or bronze */
    
    /* Bordures */
    --border:        #d4dce8;      /* Gris très pâle */
    
    /* Couleurs sémantiques */
    --success:       #00897b;      /* Turquoise foncé */
    --warning:       #e65100;      /* Orange foncé */
    
    /* Tableaux */
    --table-header:  #eaf0f8;
    --table-row-alt: #f5f8fc;
    
    /* Couleurs d'arbres (Research) */
    --growth-color:  #00897b;
    --eco-color:     #c89020;
    --battle-color:  #c62828;
    
    /* Composants Tree */
    --box-bg:        #ffffff;
    --box-header:    #eaf0f8;
    --step-bg:       #f5f8fc;
    --step-hover:    #e8eff7;
    
    /* Ombres */
    --shadow:        rgba(0, 0, 0, 0.08);
}


/* ============================================================================
   2. RESET & BASE
   ============================================================================ */

html, body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--bg-dark);
    color: var(--text-light);
    padding: 20px;
    transition: background-color 0.3s, color 0.3s;
    box-sizing: border-box;
}

/* Quand le header partagé est présent, on décale le contenu */
body.has-app-header {
    padding-top: var(--header-offset) !important;
}


/* ============================================================================
   3. APP HEADER (partagé sur toutes les pages)
   ============================================================================ */

.app-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background: var(--bg-panel);
    border-bottom: 1px solid var(--accent);  /* ⬅️ Liseré doré */
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(245, 184, 64, 0.2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    z-index: 1000;
    backdrop-filter: blur(10px);
}

/* Logo Kingshot Toolbox */
.app-header-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text-light);
    font-weight: bold;
    font-size: 18px;
    padding: 8px 12px;
    border-radius: 8px;
    transition: all 0.2s;
}

.app-header-logo:hover {
    background: var(--control-bg);
    transform: translateX(-2px);
}

.app-header-logo .logo-icon {
    font-size: 24px;
}

.app-header-logo .logo-text {
    background: linear-gradient(135deg, #d49820 0%, #f5b840 30%, #ffd76b 50%, #f5b840 70%, #d49820 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    letter-spacing: 1px;
    text-shadow: 0 0 20px rgba(245, 184, 64, 0.15);
}

/* Bouton thème dans le header */
.app-header-theme {
    background: var(--control-bg);
    color: var(--text-light);
    border: 1px solid var(--border);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.app-header-theme:hover {
    background: var(--accent);
    color: #fff;
    transform: rotate(20deg);
}

/* --- Bouton de Langue du Header (bascule FR ⇄ EN) ---
   Jumeau visuel du bouton thème : rond 40px, même fond/bordure.
   Icône globe dorée + code de langue en pastille (coin bas-droite). */
.header-lang-wrapper {
    display: flex;
    align-items: center;
}

.app-header-lang {
    position: relative;
    background: var(--control-bg);
    color: var(--text-light);
    border: 1px solid var(--border);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.app-header-lang:hover {
    border-color: var(--accent);
    box-shadow: 0 0 8px rgba(245, 184, 64, 0.2);
}

.app-header-lang .hdr-ic {
    color: var(--accent);
}

/* Code de langue courant, en pastille dorée sur le coin bas-droite */
.app-header-lang .hdr-lang-code {
    position: absolute;
    bottom: -3px;
    right: -3px;
    background: var(--accent);
    color: #0a0a0a;
    font-size: 9px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.3px;
    padding: 1px 4px;
    border-radius: 7px;
    border: 1.5px solid var(--bg-panel);
    pointer-events: none;
}

/* ============================================================================
   4. LAYOUT CALCULATEURS (sidebar + main-content)
   ============================================================================
   
   Logique : Le body utilise le scroll naturel du navigateur.
   La sidebar est "sticky" pour rester visible pendant le scroll.
   Le main-content peut grandir librement.
   ============================================================================ */

/* Body en mode "calculateur" : flex horizontal */
body:not(.hub-body) {
    display: flex;
    gap: 20px;
    min-height: calc(100vh - 40px);
}

body.has-app-header:not(.hub-body) {
    min-height: calc(100vh - var(--header-offset));
}

/* SIDEBAR — sticky avec scroll interne uniquement si nécessaire */
.sidebar {
    width: 340px;
    background-color: var(--bg-panel);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 15px;
    box-sizing: border-box;
    
    /* Comportement sticky : reste visible pendant le scroll */
    position: sticky;
    top: var(--header-offset);
    max-height: calc(100vh - var(--header-offset) - 20px);
    overflow-y: auto;
    align-self: flex-start;
}

/* MAIN CONTENT — scroll naturel via le body */
.main-content {
    flex: 1;
    background-color: var(--bg-panel);
    border-radius: 8px;
    box-shadow: 0 4px 6px var(--shadow);
    display: flex;
    flex-direction: column;
    position: relative;
    box-sizing: border-box;
    min-height: calc(100vh - var(--header-offset) - 20px);
}

/* Variante TrueGold : panneaux empilés sans fond ni bordure sur le conteneur */
.main-content.flow {
    background: transparent;
    box-shadow: none;
    gap: 20px;
}


/* ============================================================================
   5. HUB (page d'accueil)
   ============================================================================ */

.hub-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

body.has-app-header.hub-body {
    min-height: calc(100vh - var(--header-height));
}

.hub-container {
    max-width: 1200px;
    width: 100%;
}

.hub-header {
    text-align: center;
    margin-bottom: 50px;
}

.hub-header h1 {
    font-size: 3em;
    margin: 0 0 10px 0;
    background: linear-gradient(135deg, #d49820 0%, #f5b840 35%, #ffd76b 50%, #f5b840 65%, #d49820 100%);
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: 0 0 40px rgba(245, 184, 64, 0.25);
    letter-spacing: 1px;
    font-weight: 700;
}

.hub-subtitle {
    color: var(--text-muted);
    font-size: 1.2em;
    margin: 0 0 25px 0;
}

.hub-lang-switch {
    display: inline-flex;
    gap: 5px;
    background: var(--bg-panel);
    padding: 5px;
    border-radius: 25px;
    border: 1px solid var(--border);
}

.lang-btn {
    background: transparent;
    color: var(--text-muted);
    border: none;
    padding: 6px 18px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: bold;
    font-size: 13px;
    transition: all 0.2s;
}

.lang-btn.active {
    background: var(--accent);
    color: #fff;
}

.hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin-bottom: 40px;
}

.hub-card {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 30px;
    text-decoration: none;
    color: var(--text-light);
    box-shadow: 0 4px 20px var(--shadow);
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
    display: flex;
    flex-direction: column;
    border-top: 3px solid var(--accent);
    position: relative;
    overflow: hidden;
}

.hub-card:hover:not(.hub-card-soon) {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px var(--shadow);
    border-color: var(--accent);
}

/* Le reflet doré qui balaie la carte */
.hub-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(245, 184, 64, 0.08),
        transparent
    );
    transition: left 0.6s;
    pointer-events: none;
}

/* Au survol, le reflet glisse de gauche à droite */
.hub-card:hover:not(.hub-card-soon)::before {
    left: 100%;
}

.hub-card-icon {
    font-size: 3em;
    margin-bottom: 15px;
}

.hub-card h2 {
    color: var(--accent);
    margin-bottom: 10px;
    font-size: 1.5em;
}

.hub-card p {
    color: var(--text-muted);
    line-height: 1.5;
    flex: 1;
    margin-bottom: 20px;
}

.hub-card-cta {
    color: var(--success);
    font-weight: bold;
    align-self: flex-start;
}

.hub-card-soon {
    opacity: 0.6;
    cursor: not-allowed;
    border-top-color: var(--text-muted);
}

/* (.hub-footer retiré : le hub porte désormais le pied de page global
   .site-footer, injecté par js/footer.js comme sur les autres pages.) */


/* ============================================================================
   6. CONTRÔLES (inputs, checkboxes, control-groups)
   ============================================================================ */

.control-group {
    background: var(--control-bg);
    padding: 15px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.control-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Note explicative sous une option de la sidebar (ex. Sélection rapide).
   Teintes dédiées : --text-muted ne tient que 4,4:1 sur --control-bg, trop
   peu pour du 12px (même correctif que les étiquettes du changelog, cf. MAP §5). */
.group-hint {
    margin: -4px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: #908a7e;
}
[data-theme="light"] .group-hint { color: #5f6773; }

input[type="number"],
select {
    background: var(--input-bg);
    border: 1px solid var(--border);
    color: var(--text-light);
    padding: 6px;
    border-radius: 4px;
    width: 80px;
    text-align: right;
    outline: none;
}

input[type="checkbox"] {
    accent-color: var(--accent);
    transform: scale(1.2);
    cursor: pointer;
}

#modeSelect {
    width: auto;
    min-width: 150px;
    text-align: left;
}

#scoreCible {
    background: var(--input-bg);
    border: 1px solid var(--border);
    color: var(--text-light);
    padding: 6px;
    border-radius: 4px;
    width: 120px;
    text-align: right;
    outline: none;
}

.total-bonus-row {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    color: var(--accent);
}

/* Titre de sous-bloc dans un .control-group : même filet + même or que .total-bonus-row,
   mais en tête de section (évite un .control-group séparé pour trois lignes). */
.group-sep-title {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    font-weight: bold;
    color: var(--accent);
}


/* ============================================================================
   7. PANELS & RESULT BOX (TrueGold)
   ============================================================================ */

.panel {
    background-color: var(--bg-panel);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px var(--shadow);
}

.result-box {
    background: var(--bg-dark);
    border: 1px solid var(--border);
    padding: 20px;
    border-radius: 8px;
    line-height: 1.6;
    color: var(--text-light);
    min-height: 100px;
    overflow-x: hidden;
    word-wrap: break-word;
}

.bldg-icon svg { color: var(--accent); vertical-align: middle; }


/* ============================================================================
   8. TABLES (communes)
   ============================================================================ */

.table-container {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 6px;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin-bottom: 20px;
}

th,
td {
    padding: 10px;
    text-align: left;
}

th {
    background-color: var(--table-header);
    color: var(--text-light);
    font-weight: bold;
    position: sticky;
    top: 0;
    z-index: 10;
}

tbody tr:nth-child(even) {
    background-color: var(--table-row-alt);
}

tbody tr:hover {
    background-color: rgba(187, 134, 252, 0.1);
}

.table-select {
    background: var(--input-bg);
    color: var(--text-light);
    border: 1px solid var(--border);
    padding: 6px;
    border-radius: 4px;
    width: 90%;
    min-width: 80px;
    outline: none;
    cursor: pointer;
    text-align: center;
}

.table-select:focus {
    border-color: var(--accent);
}

.table-input {
    background: var(--input-bg);
    color: var(--text-light);
    border: 1px solid var(--border);
    padding: 6px 10px;
    border-radius: 4px;
    outline: none;
    font-family: inherit;
    font-size: 14px;
    box-sizing: border-box; 
}

.table-input:focus {
    border-color: var(--accent);
}

[data-theme="light"] .table-input {
    border-color: #c5cad6;
}

[data-theme="light"] .table-input:focus {
    border-color: var(--accent);
}

.table-input::placeholder {
    color: var(--text-muted);
}

.bldg-name {
    font-weight: bold;
    color: var(--accent);
    display: flex;
    align-items: center;
    gap: 8px;
}

.bldg-icon {
    font-size: 18px;
}


/* ============================================================================
   9. TABS (Research)
   ============================================================================ */

.tabs {
    display: flex;
    background: var(--table-header);
    padding: 10px 10px 0 10px;
    gap: 5px;
    border-bottom: 1px solid var(--border);
}

.tab {
    padding: 10px 20px;
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    cursor: pointer;
    user-select: none;
    color: var(--text-muted);
    transition: all 0.2s;
}

.tab.active {
    background: var(--bg-panel);
    color: var(--accent);
    border-top: 3px solid var(--accent);
    font-weight: bold;
}

.tab-content {
    padding: 20px;
    display: none;
}

.tab-content.active {
    display: block;
}


/* ============================================================================
   10. DASHBOARD CARDS (Research)
   ============================================================================ */

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 20px;
}

.stat-card {
    background: var(--control-bg);
    border: 1px solid var(--border);
    padding: 15px;
    border-radius: 6px;
    border-top: 4px solid var(--accent);
    display: flex;
    flex-direction: column;
}

.stat-card.global {
    border-top-color: var(--success);
    grid-column: span 3;
}

.stat-card.growth { border-top-color: var(--growth-color); }
.stat-card.eco    { border-top-color: var(--eco-color); }
.stat-card.battle { border-top-color: var(--battle-color); }

.progress-wrapper {
    margin: 10px 0 15px 0;
}

.progress-text {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 5px;
}

.progress-bg {
    background: var(--input-bg);
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.progress-fill {
    height: 100%;
    background: var(--accent);
    transition: width 0.4s ease;
}

.stat-card.growth .progress-fill { background: var(--growth-color); }
.stat-card.eco    .progress-fill { background: var(--eco-color); }
.stat-card.battle .progress-fill { background: var(--battle-color); }
.stat-card.global .progress-fill { background: var(--success); }

.stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.resource-icon {
    font-size: 16px;
    width: 20px;
    text-align: center;
}

.next-sugg {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}

.next-sugg .sugg-title {
    display: block;
    margin-bottom: 4px;
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
}

.next-sugg .sugg-val {
    color: var(--accent);
    font-weight: bold;
}


.ic { vertical-align: middle; }
.res-ic { color: var(--accent); flex-shrink: 0; vertical-align: middle; }
.tree-label { display: flex; align-items: center; gap: 6px; }
.resource-icon svg { vertical-align: middle; }

/* ============================================================================
   11. TREE LAYOUT (Research - Vue arbre visuel)
   ============================================================================ */

.tree-layout {
    display: flex;
    flex-direction: column;
    gap: 25px;
    padding: 10px 0;
}

.etage-row {
    background: transparent;
    border: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
}

.research-box {
    background: var(--box-bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    min-width: 250px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 2px 5px var(--shadow);
}

.research-box-header {
    background: var(--box-header);
    padding: 8px 10px;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
}

.research-box-steps {
    padding: 5px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.step-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px;
    background: var(--step-bg);
    border-radius: 3px;
    font-size: 12px;
    color: var(--text-light);
    cursor: pointer;
}

.step-row:hover {
    background: var(--step-hover);
}

.step-row.locked {
    opacity: 0.5;
}

.step-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.step-right {
    color: var(--accent);
    font-weight: bold;
    font-size: 11px;
}

.research-box.growth .step-right { color: var(--growth-color); }
.research-box.eco    .step-right { color: var(--eco-color); }
.research-box.battle .step-right { color: var(--battle-color); }


/* ============================================================================
   12. LAYOUT TOGGLE (Research - Switch arbre / liste)
   ============================================================================ */

.layout-toggle {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
    gap: 10px;
}

.toggle-btn {
    background: var(--input-bg);
    color: var(--text-muted);
    border: 1px solid var(--border);
    padding: 5px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}

.toggle-btn.active {
    background: var(--accent);
    color: #fff;
    font-weight: bold;
    border-color: var(--accent);
}

.table-view { display: none; }
.table-view.active { display: table; }
.tree-view { display: none; }
.tree-view.active { display: flex; }


/* ============================================================================
   13. BOUTONS
   ============================================================================ */

.btn-reset {
    background: linear-gradient(135deg, #e74c5c, #c0392b);
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    font-size: 12px;
    margin-top: 10px;
    transition: all 0.2s;
    box-shadow: 0 2px 6px rgba(231, 76, 92, 0.3);
}

.btn-reset:hover {
    background: linear-gradient(135deg, #c0392b, #962820);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(231, 76, 92, 0.5);
}


/* ============================================================================
   14. LEGACY / COMPATIBILITÉ
   ============================================================================
   
   L'ancien bouton de thème (présent dans certains HTML) est désormais
   masqué car remplacé par le bouton intégré au header partagé.
   ============================================================================ */

.theme-toggle {
    display: none !important;
}


/* ============================================================================
   15. RESPONSIVE (Mobile)
   ============================================================================
   
   Sur mobile : on supprime la sidebar sticky et on empile tout verticalement.
   Le scroll redevient totalement naturel.
   ============================================================================ */

@media (max-width: 768px) {
    /* HUB */
    .hub-header h1 {
        font-size: 2em;
    }
    
    /* CALCULATEURS : passage en mode empilé */
    body:not(.hub-body) {
        flex-direction: column;
        min-height: auto;
    }
    
    .sidebar {
        width: 100%;
        position: static;       /* on désactive le sticky */
        max-height: none;       /* hauteur libre */
        overflow-y: visible;
        margin-bottom: 20px;
    }
    
    .main-content {
        width: 100%;
        min-height: auto;
        padding-bottom: 40px;
    }
    
    /* DASHBOARD : 1 colonne au lieu de 3 */
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
    
    .stat-card.global {
        grid-column: span 1;
    }
}

@media (max-width: 600px) {
    /* HEADER compact sur très petits écrans */
    .app-header {
        padding: 0 10px;
    }

    .app-header-logo .logo-text {
        display: none;
    }
}


/* ============================================================================
   16. CASERNE (Grille de Héros)
   ============================================================================ */

.heroes-grid {
    display: grid;
    /* On augmente la taille minimale de 130px à 180px. Cela limitera à ~5-6 cartes par ligne sur grand écran */
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
}

.hero-card {
    position: relative;
    background: var(--control-bg);
    border: 2px solid var(--border);
    border-radius: 12px;
    aspect-ratio: 3 / 4; 
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 12px;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}

.hero-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px var(--shadow);
}

/* Codes Couleurs Rareté */
.hero-card.legendary { border-color: #f5b840; }
.hero-card.epic { border-color: #a855f7; }
.hero-card.rare { border-color: #3b82f6; }

.hero-image {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-size: cover;
    background-position: center 20%;
    z-index: 0;
    opacity: 0.9;
}

.hero-card.locked .hero-image {
    filter: grayscale(100%);
    opacity: 0.3;
}

.hero-gradient {
    position: absolute;
    bottom: 0; left: 0; right: 0; height: 65%;
    background: linear-gradient(to top, rgba(0,0,0,0.95) 10%, transparent);
    z-index: 0;
}

.hero-card > *:not(.hero-image):not(.hero-gradient) {
    z-index: 1;
    position: relative;
}

/* --- Badges Haut de carte --- */
.hero-card .hero-type-badge {
    position: absolute !important; /* Le !important empêche toute autre règle de le déloger */
    top: 8px;
    left: 8px;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    z-index: 5; /* On s'assure qu'ils sont bien au-dessus de l'image */
}

.hero-card .hero-gen-badge {
    position: absolute !important;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    border-radius: 4px;
    padding: 3px 6px;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
    z-index: 5;
}

/* --- Infos Bas de carte --- */
.hero-name-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 8px;
}

.hero-name {
    color: #ffffff !important; /* Force le blanc */
    font-weight: bold;
    font-size: 16px;
    text-shadow: 1px 1px 3px #000, 0 0 5px rgba(0,0,0,0.8); /* Ombre plus forte */
}

.hero-level {
    color: #dddddd !important; /* Force un gris très clair */
    font-size: 12px;
    background: rgba(0,0,0,0.5);
    padding: 2px 5px;
    border-radius: 3px;
}

/* --- Le nouveau système de progression d'étoiles (Fragments) --- */
.hero-shards-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0,0,0,0.4);
    padding: 4px;
    border-radius: 6px;
}

.hero-star-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.star-icon {
    font-size: 14px;
    color: var(--text-muted);
    text-shadow: 0 0 2px #000;
}

.star-icon.active {
    color: #f5b840;
}

/* La jauge divisée en 6 sous chaque étoile */
.shard-bar {
    display: flex;
    gap: 1px;
    width: 18px;
}

.shard-pip {
    height: 3px;
    flex: 1;
    background: rgba(255,255,255,0.2);
    border-radius: 1px;
}

.shard-pip.active {
    background: #f5b840;
}

/* ============================================================================
   17. MODALE CASERNE (Styles spécifiques)
   ============================================================================ */

/* Interrupteur (Toggle) */
.switch-container { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.switch-container input { display: none; }
.switch-slider { width: 44px; height: 24px; background: #333; border-radius: 12px; position: relative; transition: 0.3s; border: 1px solid #555; }
.switch-slider::after { content: ''; position: absolute; width: 18px; height: 18px; background: #888; border-radius: 50%; top: 2px; left: 2px; transition: 0.3s; }
.switch-container input:checked + .switch-slider { background: #f5b840; border-color: #f5b840; }
.switch-container input:checked + .switch-slider::after { transform: translateX(20px); background: #fff; }

/* Ligne d'une compétence */
.skill-row {
    background: var(--bg-color);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.skill-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.skill-icon {
    width: 40px; height: 40px;
    background-size: cover; background-position: center;
    border-radius: 6px; border: 1px solid var(--border);
    background-color: #222;
}

.skill-info { flex: 1; }
.skill-name { 
    font-weight: bold; 
    font-size: 14px; 
    margin-bottom: 4px; 
    color: var(--text-light); /* Force une couleur bien contrastée */
}

.skill-effect { 
    font-size: 13px !important; /* Un poil plus grand pour la lisibilité */
    color: var(--text-light) !important; /* Remplace le texte "muted" trop effacé */
    opacity: 0.85; /* Adoucit très légèrement pour le différencier du titre */
    line-height: 1.5 !important; 
}
/* Niveaux de compétence (Pips) */
.skill-pips-container {
    display: flex; justify-content: flex-end; gap: 5px;
}

.skill-pip {
    width: 28px; height: 28px;
    background: #222; border: 1px solid #444; border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: bold; color: #666;
    cursor: pointer; transition: 0.2s;
}

.skill-pip.active { background: #f5b840; border-color: #f5b840; color: #000; }
.skill-pip.locked { background: #111; border-color: #222; color: #333; cursor: not-allowed; }
.skill-row.locked { opacity: 0.5; }

/* ============================================================================
   PANNEAU LATÉRAL COULISSANT (EFFET TIROIR & DÉCALAGE GRILLE)
   ============================================================================ */

/* 1. La zone principale (la grille) s'adapte INSTANTANÉMENT pour éviter les saccades */
@media (min-width: 821px) {
    body.modal-active .main-content {
        padding-right: 440px !important;
    }
}

/* 2. Le panneau latéral (Hors de l'écran par défaut) */
#hero-modal {
    position: fixed !important;
    top: 90px !important;
    right: 20px !important;
    bottom: 20px !important;
    width: 400px !important;
    z-index: 9999 !important;
    background: transparent !important;
    pointer-events: none !important; /* Permet de cliquer à travers */
    
    display: flex !important; 
    visibility: hidden; 
    opacity: 0;
    
    transform: translateX(120%); /* Caché à droite hors de l'écran */
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s ease, visibility 0.3s;
}

/* 3. Classe ajoutée par le JS pour ouvrir le tiroir */
#hero-modal.show {
    transform: translateX(0); /* Glisse dans l'écran */
    opacity: 1;
    visibility: visible;
}

/* Contenu du panneau */
#hero-modal .modal-content {
    pointer-events: auto !important; /* On réactive le clic sur le menu lui-même */
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    margin: 0 !important;
    
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    box-shadow: -15px 0 40px rgba(0, 0, 0, 0.5) !important;
    background: var(--bg-panel) !important;
}

#modal-rel-select { min-width: 130px; }
#modal-rel-select option { background: var(--bg-panel); color: var(--text-light); }

/* ============================================================================
   MODALE DE SAUVEGARDE GLOBALE (IMPORT / EXPORT JSON)
   ============================================================================ */

.backup-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.backup-overlay.active {
    opacity: 1;
    visibility: visible;
}

.backup-modal {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    width: 450px;
    max-width: 90%;
    box-shadow: 0 10px 40px rgba(0,0,0,0.8), 0 0 0 1px rgba(245, 184, 64, 0.2);
    transform: translateY(20px);
    transition: all 0.3s ease;
    overflow: hidden;
}

.backup-overlay.active .backup-modal {
    transform: translateY(0);
}

.backup-header {
    padding: 20px;
    border-bottom: 1px solid var(--border);
    background: rgba(0,0,0,0.2);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.backup-title {
    color: var(--accent);
    margin: 0;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.backup-body {
    padding: 20px;
}

/* Checkboxes de sélection */
.backup-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    background: var(--control-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.backup-option:hover {
    border-color: var(--accent);
    background: rgba(245, 184, 64, 0.05);
}

.backup-option-text {
    font-size: 14px;
    color: var(--text-light);
}

/* Boutons Modernes */
.backup-actions {
    display: flex;
    gap: 15px;
    margin-top: 25px;
}

.btn-modern {
    flex: 1;
    padding: 12px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.btn-modern-primary {
    background: linear-gradient(135deg, var(--accent), #d49820);
    color: #000;
    border: none;
    box-shadow: 0 4px 15px rgba(245, 184, 64, 0.2);
}

.btn-modern-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 184, 64, 0.4);
}

.btn-modern-secondary {
    background: transparent;
    color: var(--text-light);
    border: 1px solid var(--border);
}

.btn-modern-secondary:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.svg-icon {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

/* ============================================================================
   CUSTOM ALERTS (REMPLACEMENT DES ALERT NAVIGATEUR)
   ============================================================================ */
.custom-alert-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(5px);
    z-index: 10005; display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transition: all 0.3s ease;
}
.custom-alert-overlay.active { opacity: 1; visibility: visible; }

.custom-alert-box {
    background: var(--bg-panel); border: 1px solid var(--border);
    border-radius: 12px; width: 380px; max-width: 90%;
    padding: 25px; text-align: center;
    box-shadow: 0 10px 40px rgba(0,0,0,0.8);
    transform: translateY(20px); transition: all 0.3s ease;
}
.custom-alert-overlay.active .custom-alert-box { transform: translateY(0); }

.custom-alert-icon { font-size: 35px; margin-bottom: 10px; }
.custom-alert-msg { color: var(--text-light); font-size: 14.5px; line-height: 1.6; margin-bottom: 25px; white-space: pre-wrap; }


/* ============================================================================
   PAGE DES EXPERTS (MASTERS)
   ============================================================================ */
.masters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 25px;
    margin-top: 20px;
}

.master-card {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    display: flex;
    flex-direction: column;
}

.master-card:hover {
    border-color: var(--accent);
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.5), 0 0 15px rgba(245, 184, 64, 0.2);
}

.master-card.locked {
    filter: grayscale(100%);
    opacity: 0.6;
}

/* Les portraits viennent de img/Master/hd/ en 600x800, exactement le ratio 3:4
   de ce cadre (240x320) : `cover` ne recadre donc rien. Plus besoin du
   filter: blur() qui masquait la pixellisation des anciennes vignettes 124 px
   au prix d'une image floue. */
.master-portrait {
    height: 320px;
    background-size: cover;
    background-position: center top;
    border-bottom: 2px solid var(--border);
    position: relative;
}

.master-portrait::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0; height: 50%;
    background: linear-gradient(to top, var(--bg-panel) 0%, transparent 100%);
}

.master-info {
    padding: 15px;
    text-align: center;
    position: relative;
    z-index: 2;
    margin-top: -40px; /* Fait remonter le texte sur le dégradé */
}

.master-name {
    font-size: 22px;
    font-weight: 800;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

.master-title {
    color: var(--text-muted);
    font-size: 12px;
    text-transform: uppercase;
    margin-top: 5px;
    margin-bottom: 15px;
}

.master-rel-badge {
    display: inline-block;
    background: rgba(245, 184, 64, 0.1);
    border: 1px solid var(--accent);
    color: var(--accent);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: bold;
}

/* Modale spécifique (réutilise l'animation fluide de la caserne) */
#master-modal {
    position: fixed !important;
    top: 90px !important;
    right: 20px !important;
    bottom: 20px !important;
    width: 400px !important;
    z-index: 9999 !important;
    background: transparent !important;
    pointer-events: none !important;
    display: flex !important; 
    visibility: hidden;
    opacity: 0;
    transform: translateX(120%);
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s ease, visibility 0.3s;
}

#master-modal.show {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
}


/* ============================================================
   HEADER CONTEXTUEL (généré depuis SITE)
   ============================================================ */
.hdr-zone { display: flex; align-items: center; gap: 12px; }
.hdr-center { flex: 1; justify-content: center; min-width: 0; }
.hdr-right { gap: 8px; }

/* ===== Dropdown custom (Jeu + Catégorie) ===== */
.hdr-dd { position: relative; }
.hdr-dd-trigger {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--control-bg); color: var(--text-light);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 8px 16px; min-width: 160px;
  font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0.3px;
  cursor: pointer; outline: none; transition: all 0.2s ease;
}
.hdr-dd-trigger:hover { border-color: var(--accent); }
.hdr-dd.open .hdr-dd-trigger {
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(245,184,64,0.12);
}
.hdr-dd-current { white-space: nowrap; }
.hdr-dd-chevron { color: var(--accent); font-size: 11px; transition: transform 0.2s ease; }
.hdr-dd.open .hdr-dd-chevron { transform: rotate(180deg); }

.hdr-dd-panel {
  position: absolute; top: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 100%; width: max-content; max-width: 280px;
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.45); backdrop-filter: blur(12px);
  padding: 6px; z-index: 1100;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.hdr-dd.open .hdr-dd-panel {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.hdr-dd-item {
  display: block; width: 100%; text-align: center;
  background: transparent; color: var(--text-light);
  border: none; border-radius: 8px; padding: 9px 18px; margin: 2px 0;
  font-family: inherit; font-size: 13px; font-weight: 500;
  white-space: nowrap; cursor: pointer; transition: all 0.15s;
}
.hdr-dd-item:hover { background: var(--control-bg); color: var(--accent); }
.hdr-dd-item.active {
  background: linear-gradient(135deg, var(--accent-hover), var(--accent), #ffd76b);
  color: #0a0a0a; font-weight: bold;
}
.hdr-dd-item.disabled {
  color: var(--text-muted); cursor: not-allowed; opacity: 0.55;
  font-size: 12px; font-style: italic;
}
.hdr-dd-item.disabled:hover { background: transparent; color: var(--text-muted); }

/* Rangée d'outils filtrés */
.hdr-tools { display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.hdr-tools::-webkit-scrollbar { display: none; }
.hdr-tool {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 6px;
  text-decoration: none; white-space: nowrap;
  color: var(--text-muted); font-size: 13px; font-weight: 500;
  border: 1px solid transparent; transition: all 0.2s;
}
.hdr-tool:hover { background: var(--control-bg); color: var(--text-light); }
.hdr-tool.active {
  background: linear-gradient(135deg, var(--accent-hover), var(--accent), #ffd76b);
  color: #0a0a0a; border-color: var(--accent); font-weight: bold;
  box-shadow: 0 2px 12px rgba(245,184,64,0.4), inset 0 1px 0 rgba(255,255,255,0.2);
}
.hdr-ic { flex-shrink: 0; }
.hdr-badge {
  font-size: 9px; font-weight: bold; text-transform: uppercase;
  background: var(--accent); color: #0a0a0a;
  padding: 1px 5px; border-radius: 8px; letter-spacing: 0.5px;
}
.hdr-soon { color: var(--text-muted); font-size: 13px; font-style: italic; padding: 0 8px; }

/* Mobile : header compact, nav dans le drawer (hamburger) */
@media (max-width: 820px) {
  .hdr-burger { display: flex !important; }
  .hdr-center,
  .header-lang-wrapper,
  .app-header-theme { display: none; }
  .app-header { padding: 0 14px; }
  .logo-text { display: none; }
}

/* ===== Hub : sections par catégorie ===== */
.hub-section { margin-bottom: 35px; }
.hub-section .hub-grid { margin-bottom: 0; }
.hub-section-title {
  font-size: 14px; text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--accent); font-weight: 700;
  margin: 0 0 18px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.hub-section-soon { font-size: 11px; color: var(--text-muted); font-style: italic; letter-spacing: 0.5px; }
.hub-card-icon svg { color: var(--accent); display: block; }
.hub-badge {
  font-size: 10px; vertical-align: middle; margin-left: 8px;
  background: var(--accent); color: #0a0a0a; padding: 2px 7px;
  border-radius: 8px; text-transform: uppercase; font-weight: bold; letter-spacing: 0.5px;
}

/* ===== Hamburger (mobile) ===== */
.hdr-burger {
  display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: 40px; height: 40px; border-radius: 8px;
  background: var(--control-bg); border: 1px solid var(--border);
  cursor: pointer; padding: 0;
}
.hdr-burger span { display: block; width: 18px; height: 2px; background: var(--text-light); border-radius: 2px; }
.hdr-burger:hover { border-color: var(--accent); }

/* ===== Drawer mobile ===== */
.hdr-drawer-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.55);
  opacity: 0; visibility: hidden; transition: opacity 0.25s ease; z-index: 1200;
}
.hdr-drawer-overlay.open { opacity: 1; visibility: visible; }
.hdr-drawer {
  position: fixed; top: 0; right: 0; height: 100%;
  width: 84%; max-width: 320px;
  background: var(--bg-panel); border-left: 1px solid var(--accent);
  box-shadow: -12px 0 40px rgba(0,0,0,0.5);
  transform: translateX(100%); transition: transform 0.28s ease;
  z-index: 1300; display: flex; flex-direction: column; overflow-y: auto;
}
.hdr-drawer.open { transform: translateX(0); }
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px; border-bottom: 1px solid var(--border);
}
.drawer-game { color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: 15px; }
.drawer-close { background: none; border: none; color: var(--text-muted); font-size: 18px; cursor: pointer; }
.drawer-nav { flex: 1; padding: 8px 10px; }
.drawer-cat {
  color: var(--text-muted); text-transform: uppercase;
  font-size: 11px; letter-spacing: 1px; font-weight: 700; margin: 16px 8px 6px;
}
.drawer-soon { font-style: italic; opacity: 0.7; }
.drawer-tool {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; border-radius: 8px;
  color: var(--text-light); text-decoration: none; font-size: 14px;
}
.drawer-tool:hover { background: var(--control-bg); }
.drawer-tool.active {
  background: linear-gradient(135deg, var(--accent-hover), var(--accent), #ffd76b);
  color: #0a0a0a; font-weight: bold;
}
.drawer-tool svg { color: var(--accent); flex-shrink: 0; }
.drawer-tool.active svg { color: #0a0a0a; }
.drawer-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 16px; border-top: 1px solid var(--border);
}
.drawer-lang { display: flex; gap: 6px; }
.drawer-lang-btn {
  background: var(--control-bg); border: 1px solid var(--border); color: var(--text-light);
  padding: 6px 14px; border-radius: 20px; font-weight: bold; cursor: pointer;
}
.drawer-lang-btn.active { background: var(--accent); color: #0a0a0a; border-color: var(--accent); }
.drawer-theme {
  display: flex; align-items: center; justify-content: center;
  background: var(--control-bg); border: 1px solid var(--border);
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  font-size: 18px; padding: 0; line-height: 1;
}
body.drawer-locked { overflow: hidden; }





/* ===== Shop Classique — grille de cartes (DA Kingshot, lecture seule) ===== */
.shop-card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:15px;
}
.shop-item-card{
  display:flex; flex-direction:column; height:100%;
  background:var(--control-bg);
  border:1px solid var(--border);
  border-top:3px solid var(--cat,var(--accent));
  border-radius:10px; overflow:hidden;
  transition:transform .12s ease, box-shadow .12s ease;
}
.shop-item-card:hover{ transform:translateY(-2px); box-shadow:0 4px 14px var(--shadow); }
.shop-item-card .sic-visual{ position:relative; display:flex; align-items:center; justify-content:center; padding:16px; }
.shop-item-card .sic-img{ width:64px; height:64px; background-size:contain; background-repeat:no-repeat; background-position:center; filter:drop-shadow(0 2px 4px rgba(0,0,0,.45)); }
.shop-item-card .sic-qty{ position:absolute; top:6px; right:6px; background:rgba(0,0,0,.72); color:#fff; font-size:12px; font-weight:700; padding:1px 7px; border-radius:9px; border:1px solid rgba(255,255,255,.18); }
.shop-item-card .sic-top{ position:absolute; top:6px; left:6px; background:var(--accent); color:#000; font-size:10px; font-weight:800; letter-spacing:.3px; padding:2px 7px; border-radius:9px; }
.shop-item-card .sic-name{ flex-grow:1; padding:10px 12px 6px; font-size:13px; font-weight:600; line-height:1.3; color:var(--text-light); word-break:break-word; }
.shop-item-card .sic-cost{ padding:0 12px 10px; font-size:14px; color:var(--text-light); }
.shop-item-card .sic-cost strong{ color:var(--accent); font-size:15px; }
.shop-item-card .sic-cost .sic-res{ font-size:11px; color:var(--text-muted); }
.shop-item-card .sic-stats{ display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:auto; padding:8px 12px; background:var(--input-bg); border-top:1px solid var(--border); font-size:12px; }
.shop-item-card .sic-gem{ color:var(--success); font-weight:600; }
.shop-item-card .sic-ratio{ color:var(--text-light); font-weight:700; }
.shop-item-card.is-top{ border:1px solid #3B82F6; border-top:3px solid #3B82F6; box-shadow:0 0 0 1px rgba(59,130,246,.4), 0 4px 14px var(--shadow); }
.shop-item-card.is-top .sic-ratio{ color:#3B82F6; }


/* ============================================================
   HELP SYSTEM — bouton, modale, bandeau, tooltips (DA + thèmes)
   À coller à la fin de css/style.css
   ============================================================ */

/* Bouton "Comment ça marche ?" près du titre */
.help-btn{
  display:inline-flex; align-items:center; gap:6px;
  margin:6px 0 10px 12px; vertical-align:middle;
  background:var(--control-bg); color:var(--text-muted);
  border:1px solid var(--border); border-radius:20px;
  padding:5px 12px 5px 8px; font-size:13px; font-weight:600;
  cursor:pointer; transition:color .15s, border-color .15s;
}
.help-btn:hover{ color:var(--accent); border-color:var(--accent); }
.help-btn .help-q{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:50%;
  background:var(--accent); color:#1b1e25; font-weight:800; font-size:12px;
}
.hub-header .help-btn { margin: 12px auto 0; display: flex; width: fit-content; }

/* Icône info "i" + tooltip CSS pur (hover / focus clavier) */
.help-i{
  display:inline-flex; align-items:center; justify-content:center;
  width:15px; height:15px; margin-left:5px; border-radius:50%;
  background:var(--control-bg); border:1px solid var(--border);
  color:var(--text-muted); font:italic 700 10px/1 Georgia, serif;
  cursor:help; position:relative; vertical-align:middle; user-select:none;
}
.help-i:hover, .help-i:focus{ color:var(--accent); border-color:var(--accent); outline:none; }

/* Bulle unique positionnée en JS (js/help.js) et contrainte dans la fenêtre :
   remplace l'ancien tooltip ::after centré qui débordait hors écran dans la sidebar. */
#help-tip{
  position:fixed; z-index:3000; box-sizing:border-box;
  width:max-content; max-width:280px; white-space:normal; text-align:left;
  background:var(--bg-panel); color:var(--text-light);
  border:1px solid var(--border); border-radius:8px;
  box-shadow:0 6px 18px var(--shadow);
  padding:8px 10px; font:400 12px/1.4 sans-serif;
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .15s, transform .15s; pointer-events:none;
}
#help-tip.show{ opacity:1; visibility:visible; transform:none; }

/* Modale */
.help-overlay{
  position:fixed; inset:0; z-index:2000;
  background:rgba(0,0,0,.55); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; transition:opacity .15s;
}
.help-overlay.open{ opacity:1; }
.help-modal{
  position:relative; width:100%; max-width:520px; max-height:85vh; overflow-y:auto;
  background:var(--bg-panel); border:1px solid var(--border); border-radius:14px;
  box-shadow:0 18px 50px rgba(0,0,0,.5);
  padding:24px 24px 26px;
  transform:translateY(8px) scale(.98); transition:transform .15s;
}
.help-overlay.open .help-modal{ transform:none; }
.help-x{
  position:absolute; top:12px; right:12px;
  width:32px; height:32px; border-radius:8px;
  background:transparent; border:none; color:var(--text-muted);
  font-size:22px; line-height:1; cursor:pointer; transition:background .15s, color .15s;
}
.help-x:hover{ background:var(--control-bg); color:var(--text-light); }
.help-modal-title{ margin:0 34px 4px 0; color:var(--accent); font-size:20px; }
.help-summary{ color:var(--text-light); line-height:1.5; margin:10px 0 4px; }
.help-h3{ color:var(--text-light); font-size:13px; text-transform:uppercase; letter-spacing:.4px; margin:18px 0 8px; opacity:.8; }
.help-steps{ margin:0; padding-left:20px; color:var(--text-light); line-height:1.55; }
.help-steps li{ margin-bottom:8px; }
.help-steps li::marker{ color:var(--accent); font-weight:700; }
.help-links{ list-style:none; margin:0; padding:0; }
.help-links li{ margin-bottom:6px; }
.help-links a{ color:var(--accent); text-decoration:none; font-weight:600; }
.help-links a:hover{ text-decoration:underline; }

/* Bandeau d'intro (mémorisé via localStorage) */
.help-banner{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin:14px 0; padding:12px 14px;
  background:var(--control-bg); border:1px solid var(--border);
  border-left:3px solid var(--accent); border-radius:8px;
}
.help-banner-txt{ flex:1 1 240px; color:var(--text-light); font-size:13.5px; line-height:1.45; }
.help-banner-more{
  background:var(--accent); color:#1b1e25; border:none; border-radius:6px;
  padding:6px 12px; font-weight:700; font-size:13px; cursor:pointer; white-space:nowrap;
}
.help-banner-x{
  background:transparent; border:none; color:var(--text-muted);
  font-size:20px; line-height:1; cursor:pointer; padding:0 4px;
}
.help-banner-x:hover{ color:var(--text-light); }

@media (max-width:600px){
  .help-btn{ margin-left:0; }
  #help-tip{ max-width:220px; }
}

/* ============================================================
   Shop d'Événement — grille de cartes (divulgation progressive)
   À coller à la fin de css/style.css
   ============================================================ */

/* Cartes un peu plus larges que le Classique (plus de contenu) */
.shop-card-grid.event-grid{ grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }

/* Le bloc planification est collé en bas -> les "Détails" s'alignent entre cartes */
.event-card .sic-name{ flex-grow:0; }
.event-card .sic-stats{ margin-top:0; border-top:none; }
.event-card .sic-planning{ margin-top:auto; }

/* Badge reset/stock dans le coin du visuel */
.event-card .sic-reset{
  position:absolute; top:6px; right:6px;
  background:rgba(0,0,0,.72); border:1px solid rgba(255,255,255,.18);
  border-radius:9px; padding:1px 7px; font-size:12px; line-height:1.4;
}

/* Inputs Quantité / Coût (toujours visibles) */
.event-card .sic-fields{ display:flex; gap:8px; padding:8px 12px 4px; }
.event-card .sic-f{ flex:1; display:flex; flex-direction:column; gap:3px; font-size:11px; color:var(--text-muted); }
.event-card .sic-f > span{ text-transform:uppercase; letter-spacing:.3px; display:flex; align-items:center; }
.event-card .sic-f input{
  width:100%; box-sizing:border-box; text-align:right;
  background:rgba(127,127,127,.10); border:1px solid transparent; border-radius:6px;
  color:var(--text-light); padding:5px 7px; font-size:13px;
  transition:border-color .15s, background .15s;
}
.event-card .sic-f input:focus{ outline:none; border-color:var(--accent); background:var(--input-bg); }

/* Bloc repliable <details> */
.sic-planning{ border-top:1px solid var(--border); }
.sic-planning summary{
  list-style:none; cursor:pointer; user-select:none;
  display:flex; align-items:center; gap:6px;
  padding:8px 12px; font-size:12px; font-weight:600; color:var(--text-muted);
  transition:color .15s, background .15s;
}
.sic-planning summary::-webkit-details-marker{ display:none; }
.sic-planning summary::after{ content:"▸"; margin-left:auto; transition:transform .2s; }
.sic-planning[open] summary::after{ transform:rotate(90deg); }
.sic-planning summary:hover{ color:var(--accent); background:rgba(127,127,127,.06); }

.sic-plan-body{
  padding:4px 12px 12px; display:flex; flex-direction:column; gap:8px;
  animation:sicReveal .18s ease;
}
@keyframes sicReveal{ from{opacity:0; transform:translateY(-4px);} to{opacity:1; transform:none;} }

/* Dans les détails : le champ Restant passe en ligne (label gauche / input droite) */
.sic-planning .sic-f{ flex-direction:row; align-items:center; justify-content:space-between; }
.sic-planning .sic-f input{ width:90px; flex:0 0 auto; }

.sic-plan-row{ display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:12px; color:var(--text-muted); }
.sic-plan-row b{ color:var(--text-light); }

.sic-del{
  margin-top:2px; align-self:flex-end;
  background:transparent; border:1px solid var(--border); color:var(--text-muted);
  border-radius:6px; padding:4px 10px; font-size:12px; cursor:pointer;
  transition:border-color .15s, color .15s;
}
.sic-del:hover{ border-color:#e5484d; color:#e5484d; }


/* Bouton Sauvegarde Globale : flottant desktop, en bas de page sur mobile */
.backup-fab { position: fixed; bottom: 20px; right: 20px; z-index: 9000; width: 250px; }
@media (max-width: 600px) {
  .backup-fab { position: static; width: auto; margin: 28px 16px 40px; }
}
/* Repli d'une boutique (Shop Calc) */
.sc-collapse { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 4px 0 0; }
.sc-collapse:hover { color: var(--accent); }
.sc-shop.collapsed .shop-card-grid,
.sc-shop.collapsed table { display: none; }
.sc-shop.collapsed { padding-bottom: 10px; }

/* ============================================================================
   MODALES MOBILES — Plein écran + onglets (Caserne & Experts)
   Barre d'onglets générée par js/modal-tabs.js, masquée sur desktop.
   ============================================================================ */

.mtabs {
    display: none;
    align-items: center;
    gap: 6px;
    flex: none;
    padding: 10px 14px;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border);
}
.mtab {
    flex: 1 1 0;
    min-width: 0;
    padding: 8px 6px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--control-bg);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mtab.active { background: var(--accent); border-color: var(--accent); color: #0a0a0a; }
.mtab-close {
    flex: none;
    width: 34px;
    height: 34px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--control-bg);
    color: var(--text-muted);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
.mtab-close:hover { border-color: var(--accent); color: var(--accent); }

@media (max-width: 820px) {
    #hero-modal, #master-modal {
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: auto !important;
        transform: translateY(100%);
    }
    #hero-modal.show, #master-modal.show { transform: translateY(0); }

    #hero-modal .modal-content, #master-modal .modal-content {
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    #hero-modal #modal-body, #master-modal #modal-body {
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        padding: 14px !important;
    }
    #hero-modal .modal-header { padding: 14px !important; }
    #master-modal #modal-header-bg { height: 96px !important; }
    #hero-modal .modal-actions, #master-modal .modal-actions {
        flex: none;
        padding: 10px 14px !important;
    }

    /* Un seul panneau visible à la fois */
    .mtabs { display: flex; }
    #modal-body [data-mtab] { display: none !important; }
    #modal-body [data-mtab].mtab-on { display: block !important; }
    #hero-widget-container {
        margin-top: 0 !important;
        border-top: 0 !important;
        padding-top: 0 !important;
    }
}
/* Base de Données (Experts / Familiers) — mise en valeur du placeholder « X »
   des descriptions de compétences (la valeur qui change selon le palier). */
.hl-x {
    color: var(--accent);
    font-weight: 700;
    padding: 0 1px;
}

/* ============================================================
   Base de Données — lisibilité des tableaux sur mobile
   Toutes les pages DB (bâtiments, académie, experts, familiers)
   partagent .db-table / .c-lbl. Scopé mobile : desktop inchangé.
   Parti pris : on préfère faire défiler qu'entasser (cf. demande).
   ============================================================ */
/* Dans les blocs compétences (Experts/Familiers), seul le TABLEAU défile :
   la description reste fixe et passe simplement à la ligne. On sort donc le
   défilement de .m-block (qui contient description + tableau) vers .tbl-scroll. */
body.has-app-header .m-block { overflow: visible; }
body.has-app-header .tbl-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Tables des fiches Experts/Familiers : largeur au CONTENU (pas étirées à
   100%), pour que chaque en-tête reste proche de ses valeurs plutôt que
   séparé par un grand vide. En-têtes numériques alignés à droite, comme
   leurs cellules, pour tomber juste au-dessus du chiffre. */
body.has-app-header .db-section table.db-table { width: auto; max-width: 100%; }
body.has-app-header .db-section table.db-table thead th.num { text-align: right; }

@media (max-width: 820px) {
  /* .db-page est un flex-item de body:not(.hub-body) (display:flex column) :
     sans contrainte il prend la largeur de son contenu et la page déborde.
     min-width:0 + max-width:100% le plafonnent à la largeur dispo, et le
     tableau déborde alors DANS son conteneur overflow-x (qui défile). */
  body.has-app-header .db-page { padding-left: 10px; padding-right: 10px; min-width: 0; max-width: 100%; }

  /* Le tableau défile horizontalement dans sa boîte ; la page ne déborde pas. */
  body.has-app-header .table-container,
  body.has-app-header .table-wrap,
  body.has-app-header .tbl-scroll {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Cellules aérées et lisibles. */
  body.has-app-header table.db-table { font-size: 12.5px; }
  body.has-app-header table.db-table th,
  body.has-app-header table.db-table td { padding: 9px 12px; }

  /* Première colonne (palier / niveau) figée : le contexte de la ligne
     reste visible pendant qu'on fait défiler les valeurs à droite. */
  body.has-app-header table.db-table td.c-lbl,
  body.has-app-header table.db-table th:first-child {
    position: sticky;
    left: 0;
    background: var(--bg-dark);
    box-shadow: 1px 0 0 var(--border);
  }
  body.has-app-header table.db-table td.c-lbl { z-index: 1; }
  body.has-app-header table.db-table thead th { z-index: 2; }
  body.has-app-header table.db-table thead th:first-child { z-index: 3; }

  /* Onglets de navigation entre entités : compacts mais cliquables. */
  body.has-app-header .db-switch-item { font-size: 12px; padding: 5px 11px; }
}

/* ============================================================
   PROFILS (comptes multiples) — pastille header, panneau,
   drawer mobile, modale de gestion, toast de bascule.
   Réutilise .hdr-dd (ouverture) et .backup-* (modale).
   ============================================================ */

/* --- Pastille profil (desktop, dans .hdr-right) --- */
.pfp { position: relative; }
.pfp-trigger {
  display: flex; align-items: center; gap: 6px;
  background: var(--control-bg); border: 1px solid var(--border);
  border-radius: 22px; padding: 4px 8px 4px 4px;
  cursor: pointer; outline: none; transition: border-color 0.2s, box-shadow 0.2s;
}
.pfp-trigger:hover { border-color: var(--accent); }
.pfp.open .pfp-trigger { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(245,184,64,0.12); }
.pfp-chevron { color: var(--accent); font-size: 11px; transition: transform 0.2s ease; }
.pfp.open .pfp-chevron { transform: rotate(180deg); }

/* Avatar à initiale + anneau coloré par profil */
.pfp-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--bg-panel); color: var(--text-light);
  font-weight: 800; font-size: 13px; line-height: 1; text-transform: uppercase;
  border: 2px solid var(--ring, var(--accent));
  box-shadow: 0 0 0 1px rgba(0,0,0,0.25) inset;
  flex-shrink: 0;
}
.pfp-avatar.lg { width: 42px; height: 42px; font-size: 17px; border-width: 2.5px; }
.pfp-avatar.sm { width: 26px; height: 26px; font-size: 12px; }

/* --- Panneau (hérite .hdr-dd-panel pour l'anim/position) --- */
.pfp-panel { padding: 8px; max-width: 300px; min-width: 240px; left: auto; right: 0; transform: translateY(-6px); }
.pfp.open .pfp-panel { transform: translateY(0); }
.pfp-head {
  color: var(--text-muted); text-transform: uppercase;
  font-size: 10px; letter-spacing: 1.2px; font-weight: 700;
  padding: 4px 8px 8px;
}
.pfp-list { display: flex; flex-direction: column; gap: 3px; max-height: 240px; overflow-y: auto; }
.pfp-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: transparent; border: 1px solid transparent; border-radius: 9px;
  padding: 7px 9px; cursor: pointer; color: var(--text-light);
  font-family: inherit; font-size: 13.5px; transition: background 0.15s, border-color 0.15s;
}
.pfp-row:hover { background: var(--control-bg); }
.pfp-row.active { border-color: rgba(245,184,64,0.4); background: rgba(245,184,64,0.07); cursor: default; }
.pfp-row-name { flex: 1; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pfp-row-badge {
  font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px;
  background: var(--accent); color: #0a0a0a; padding: 2px 7px; border-radius: 8px; flex-shrink: 0;
}
.pfp-sep { height: 1px; background: var(--border); margin: 7px 4px; }
.pfp-act {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  background: transparent; border: none; border-radius: 9px;
  padding: 9px; cursor: pointer; color: var(--text-light);
  font-family: inherit; font-size: 13px; font-weight: 600; transition: background 0.15s, color 0.15s;
}
.pfp-act:hover { background: var(--control-bg); color: var(--accent); }
.pfp-act .pfp-act-ic { color: var(--accent); font-size: 15px; width: 18px; text-align: center; flex-shrink: 0; }

/* Bloc langue+thème : replié dans le panneau UNIQUEMENT en mode condensé */
.pfp-chrome { display: none; }
.app-header.hdr-condensed .pfp-chrome { display: block; }
.pfp-chrome-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 9px;
}
.pfp-chrome-row > span { color: var(--text-muted); font-size: 12px; font-weight: 600; }
.pfp-chrome-lang { display: flex; gap: 6px; }
.pfp-chrome-lang button {
  background: var(--control-bg); border: 1px solid var(--border); color: var(--text-light);
  padding: 5px 12px; border-radius: 16px; font-weight: 700; font-size: 12px; cursor: pointer;
}
.pfp-chrome-lang button.active { background: var(--accent); color: #0a0a0a; border-color: var(--accent); }
.pfp-chrome-theme {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  background: var(--control-bg); border: 1px solid var(--border); font-size: 16px; line-height: 1; padding: 0;
}

/* Mode condensé : on retire langue + thème de la barre (place rendue aux outils) */
.app-header.hdr-condensed .header-lang-wrapper,
.app-header.hdr-condensed .app-header-theme { display: none; }

/* La pastille profil n'apparaît que sur desktop (mobile → bloc dans le drawer) */
@media (max-width: 820px) { .pfp { display: none; } }

/* --- Bloc profil en haut du drawer (mobile) --- */
.drawer-profile { padding: 14px 16px; border-bottom: 1px solid var(--border); }
.drawer-profile-card {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: var(--control-bg); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px; cursor: pointer; color: var(--text-light); font-family: inherit; text-align: left;
}
.drawer-profile-card:hover { border-color: var(--accent); }
.drawer-profile-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.drawer-profile-label { display: block; color: var(--text-muted); font-size: 10px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
.drawer-profile-name { display: block; font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drawer-profile-chevron { color: var(--accent); font-size: 12px; transition: transform 0.2s; flex-shrink: 0; }
.drawer-profile.open .drawer-profile-chevron { transform: rotate(180deg); }
.drawer-profile-body { display: none; margin-top: 10px; }
.drawer-profile.open .drawer-profile-body { display: block; }
.drawer-profile-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: transparent; border: 1px solid transparent; border-radius: 9px;
  padding: 9px; cursor: pointer; color: var(--text-light); font-family: inherit; font-size: 14px; text-align: left;
}
.drawer-profile-row:hover { background: var(--control-bg); }
.drawer-profile-row.active { border-color: rgba(245,184,64,0.4); background: rgba(245,184,64,0.07); }
.drawer-profile-row .pfp-row-name { flex: 1; font-weight: 600; }
.drawer-profile-manage {
  display: flex; align-items: center; gap: 9px; width: 100%; margin-top: 4px;
  background: transparent; border: none; border-radius: 9px; padding: 10px 9px;
  cursor: pointer; color: var(--accent); font-family: inherit; font-size: 13.5px; font-weight: 600; text-align: left;
}
.drawer-profile-manage:hover { background: var(--control-bg); }

/* --- Modale de gestion (réutilise .backup-overlay/.backup-modal) --- */
.pfp-modal-desc { color: var(--text-light); font-size: 14px; line-height: 1.6; margin: 0 0 20px; }
.pfp-manage-list { display: flex; flex-direction: column; gap: 10px; }
.pfp-manage-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--control-bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px;
}
.pfp-manage-row.active { border-color: rgba(245,184,64,0.45); }
.pfp-manage-input {
  flex: 1; min-width: 0; background: var(--input-bg); color: var(--text-light);
  border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px;
  font-family: inherit; font-size: 14px; font-weight: 600; outline: none;
}
.pfp-manage-input:focus { border-color: var(--accent); }
.pfp-manage-btn {
  background: transparent; border: 1px solid var(--border); color: var(--text-muted);
  border-radius: 6px; padding: 7px 11px; cursor: pointer; font-size: 12px; font-weight: 700;
  white-space: nowrap; transition: all 0.15s;
}
.pfp-manage-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.pfp-manage-btn.danger:hover:not(:disabled) { border-color: var(--warning); color: var(--warning); }
.pfp-manage-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.pfp-manage-badge {
  font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px;
  background: var(--accent); color: #0a0a0a; padding: 3px 8px; border-radius: 8px; white-space: nowrap;
}
.pfp-manage-hint {
  margin-top: 18px; padding: 11px 13px; border-radius: 8px;
  background: rgba(245,184,64,0.06); border: 1px solid rgba(245,184,64,0.25);
  color: var(--text-muted); font-size: 12.5px; line-height: 1.5;
}
.pfp-manage-new { margin-top: 16px; }

/* --- Toast de bascule --- */
/* Toast : bascule de profil (.pfp-toast) et retour d'action générique
   (.kt-toast, cf. showAppToast dans header.js) — même gabarit visuel. */
.pfp-toast, .kt-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(16px);
  display: flex; align-items: center; gap: 11px;
  background: var(--bg-panel); border: 1px solid var(--accent); border-radius: 12px;
  padding: 12px 18px; box-shadow: 0 12px 34px rgba(0,0,0,0.5);
  color: var(--text-light); font-size: 14px; font-weight: 600;
  z-index: 10010; opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease;
}
.pfp-toast.show, .kt-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.kt-toast { max-width: min(90vw, 460px); text-align: center; }
.kt-toast.is-ok { border-color: var(--success); }

/* ============================================================
   TRUEGOLD — PLAN D'AMÉLIORATION CHRONOLOGIQUE
   Une série = des niveaux consécutifs sur un même bâtiment,
   numérotée dans l'ordre réel d'exécution (un bâtiment peut
   revenir plusieurs fois). Repliable : le détail niveau par
   niveau est masqué par défaut.
   ============================================================ */

.tg-plan-hint {
  color: var(--text-muted); font-size: 12.5px; line-height: 1.5;
  margin: 0 0 10px; padding-left: 24px;
}

.tg-plan { display: flex; flex-direction: column; gap: 8px; }

.tg-serie {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--success);
  border-radius: 8px;
  overflow: hidden;
}
.tg-serie.is-wip { border-left-color: var(--warning); }

/* --- En-tête cliquable (résumé toujours visible) --- */
.tg-serie-head {
  list-style: none; cursor: pointer; user-select: none;
  touch-action: manipulation;
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; min-height: 44px;
  transition: background 0.2s;
}
.tg-serie-head::-webkit-details-marker { display: none; }
.tg-serie-head:hover { background: rgba(245,184,64,0.06); }
.tg-serie-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.tg-serie-num {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 24px; padding: 0 5px;
  border-radius: 50%;
  background: var(--control-bg); border: 1px solid var(--border);
  color: var(--accent); font-size: 12px; font-weight: 800; line-height: 1;
}
.tg-serie.is-wip .tg-serie-num { color: var(--warning); }

.tg-serie-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }

.tg-serie-title { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; line-height: 1.4; }
.tg-serie-icon { display: inline-flex; }
.tg-serie-icon svg { color: var(--accent); vertical-align: middle; }
.tg-serie-name { color: var(--text-light); font-size: 14.5px; }
.tg-serie-from { color: var(--text-muted); font-size: 13px; }
.tg-serie-arrow { color: var(--text-muted); font-size: 13px; }
.tg-serie-to { color: var(--accent); font-size: 13.5px; font-weight: 700; }

.tg-serie-count {
  background: var(--control-bg); border: 1px solid var(--border); border-radius: 20px;
  padding: 1px 8px; color: var(--text-muted); font-size: 11.5px; font-weight: 600;
}
.tg-serie-status {
  border-radius: 20px; padding: 1px 8px;
  font-size: 11.5px; font-weight: 700;
  color: var(--success); background: rgba(78,205,196,0.12); border: 1px solid var(--success);
}
.tg-serie.is-wip .tg-serie-status {
  color: var(--warning); background: rgba(255,140,66,0.12); border-color: var(--warning);
}

.tg-serie-sub { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--text-muted); font-size: 12.5px; }
.tg-serie-sub strong { color: var(--text-light); font-weight: 700; }

.tg-serie-unlock { color: var(--text-muted); font-size: 12px; }
.tg-serie-unlock strong { color: var(--accent); font-weight: 700; }

.tg-serie-chev {
  flex: 0 0 auto; align-self: center;
  color: var(--text-muted); font-size: 13px;
  transition: transform 0.2s ease, color 0.2s;
}
.tg-serie[open] .tg-serie-chev { transform: rotate(90deg); color: var(--accent); }
.tg-serie-head:hover .tg-serie-chev { color: var(--accent); }

/* --- Détail niveau par niveau --- */
.tg-serie-body {
  border-top: 1px solid var(--border);
  padding: 8px 12px 12px;
  animation: tgReveal 0.18s ease;
}
@keyframes tgReveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Le tableau défile dans sa boîte (7 colonnes ne tiennent pas sur mobile).
   Ombres de bord en CSS pur : elles n'apparaissent que s'il reste du contenu
   à faire défiler de ce côté (couches `local` = masque, `scroll` = ombre). */
.tg-steps-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(to right, var(--bg-panel) 30%, rgba(255,255,255,0)) left center / 22px 100% no-repeat local,
    linear-gradient(to left,  var(--bg-panel) 30%, rgba(255,255,255,0)) right center / 22px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, var(--tg-scroll-edge), rgba(255,255,255,0)) left center / 11px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, var(--tg-scroll-edge), rgba(255,255,255,0)) right center / 11px 100% no-repeat scroll;
}
:root { --tg-scroll-edge: rgba(255,255,255,0.18); }          /* sombre : bord clair */
[data-theme="light"] { --tg-scroll-edge: rgba(0,0,0,0.20); } /* clair  : bord sombre */

/* Largeur au contenu (même convention que les tables des pages Base de Données) :
   chaque en-tête reste collé à ses valeurs au lieu d'être écarté par un grand vide. */
.tg-steps { width: auto; margin: 0; font-size: 13px; border-collapse: collapse; }
.tg-steps th {
  background: transparent; color: var(--text-muted);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
  padding: 5px 8px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.tg-steps td {
  padding: 6px 8px; border-bottom: 1px solid var(--border);
  color: var(--text-light); white-space: nowrap;
}
.tg-steps tbody tr:last-child td { border-bottom: none; }
.tg-steps tbody tr:hover td { background: var(--table-row-alt); }
.tg-steps th.num, .tg-steps td.num { text-align: right; }
.tg-steps td.num { font-variant-numeric: tabular-nums; }
.tg-steps th:not(.num), .tg-steps td:not(.num) { padding-right: 18px; }

.tg-steps .tg-ord { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.tg-steps .tg-tier { color: var(--accent); font-weight: 700; }
.tg-steps .tg-pts { color: var(--success); font-weight: 600; }
.tg-steps .tg-none { color: var(--text-muted); }
.tg-steps .tg-left { display: block; color: var(--warning); font-size: 11px; }
.tg-steps tr.is-wip td { background: rgba(255,140,66,0.07); }

/* --- Mobile : on empile le résumé, le détail garde son scroll horizontal --- */
@media (max-width: 600px) {
  .tg-plan-hint { padding-left: 0; }
  .tg-serie-head { padding: 10px; gap: 8px; }
  .tg-serie-name { font-size: 14px; }
  .tg-serie-sub { gap: 3px 10px; font-size: 12px; }
  .tg-steps { font-size: 12.5px; }
  .tg-steps th, .tg-steps td { padding: 5px 6px; }
}

/* ============================================================
   « APPLIQUER LES MODIFICATIONS » — CTA de fin de plan
   Partagé par TrueGold et l'Académie de Guerre : le bouton clôt
   le panneau de résultat et réécrit les saisies de la page comme
   si le plan venait d'être réalisé en jeu. Action à conséquence :
   CTA doré (le plus fort de la charte) + confirmation détaillée.
   ============================================================ */

.plan-apply {
  margin-top: 20px; padding-top: 18px;
  border-top: 1px dashed var(--border);
  display: flex; flex-direction: column; align-items: center; gap: 9px;
}

.plan-apply-btn {
  min-height: 44px; padding: 12px 26px;         /* 44px = cible tactile minimale */
  border: none; border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: #1a1200; font-size: 14px; font-weight: 700; letter-spacing: .4px;
  font-family: inherit; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  box-shadow: 0 4px 15px rgba(245,184,64,0.18);
  transition: transform .2s ease, box-shadow .2s ease;
}
.plan-apply-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(245,184,64,0.38); }
.plan-apply-btn:active { transform: translateY(0); }
.plan-apply-btn:focus-visible { outline: 2px solid var(--text-light); outline-offset: 3px; }
.plan-apply-btn svg { flex: none; }

.plan-apply-hint {
  color: var(--text-muted); font-size: 12.5px; line-height: 1.5;
  text-align: center; max-width: 52ch;
}

/* Récapitulatif des changements, dans la modale de confirmation.
   .custom-alert-msg est centré et en pre-wrap : on rétablit les deux ici. */
.apply-diff {
  text-align: left; white-space: normal;
  margin: 14px 0 4px; padding: 12px 14px;
  background: var(--control-bg); border: 1px solid var(--border); border-radius: 8px;
  max-height: 40vh; overflow-y: auto;
}
.apply-diff-h {
  color: var(--accent); font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .8px;
  margin: 10px 0 5px;
}
.apply-diff-h:first-child { margin-top: 0; }
.apply-diff-r {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: 13px; line-height: 1.5; padding: 2px 0;
}
.apply-diff-r > span { color: var(--text-muted); min-width: 0; }
.apply-diff-r > b { color: var(--text-light); font-weight: 700; text-align: right; }
.apply-diff-r em { color: var(--text-muted); font-weight: 400; font-style: normal; font-size: 12px; }
.apply-warn { color: var(--warning); font-size: 12.5px; line-height: 1.5; margin-top: 12px; }

@media (prefers-reduced-motion: reduce) {
  .plan-apply-btn { transition: none; }
  .plan-apply-btn:hover { transform: none; }
}


/* ============================================================================
   PIED DE PAGE GLOBAL (.site-footer — injecté par js/footer.js)
   ============================================================================
   Trois destinations (Discord · À propos · Nouveautés) + mention légale.

   Piège du layout : le body des pages outil ET du hub est en `display:flex`
   (§4 et §5). Un pied de page enfant du body s'y placerait donc À CÔTÉ de la
   sidebar. D'où `flex-wrap:wrap` + `flex:0 0 100%` ci-dessous, qui lui rendent
   sa propre ligne. Le `min-width:0` sur les blocs de contenu garantit qu'ils
   rétrécissent au lieu de passer eux-mêmes à la ligne (sans lui, un tableau
   large pourrait faire basculer .main-content sous la sidebar).
   ============================================================================ */

body { flex-wrap: wrap; }
body > .main-content,
body > .db-page,
.page-row > * { min-width: 0; }

/* Rangée de contenu des pages à sidebar (créée par js/footer.js).
   Elle reprend la disposition que portait le body, dont elle devient
   l'unique bloc de contenu : la sidebar y est sticky et s'y arrête, donc le
   pied de page qui suit la rangée est toujours DESSOUS, sans que la sidebar
   ait à rétrécir. Contenu plus court que la sidebar = vide à droite, assumé. */
body.has-page-row:not(.hub-body) { display: block; }
.page-row { display: flex; gap: 20px; align-items: flex-start; }
@media (max-width: 768px) {
    .page-row { flex-direction: column; }
}

.site-footer {
    /* Bande pleine largeur COLLÉE aux bords, en écho au header : les marges
       négatives annulent le `padding: 20px` du body (§2), y compris en bas —
       sans quoi le pied de page flotte comme une carte au-dessus du vide.
       `flex-basis: 100% + 40px` compense exactement ces marges latérales :
       la bande touche les deux bords sans jamais créer de défilement. */
    /* `width` et non `flex-basis` : sous 768px le body passe en colonne (§15)
       et flex-basis y régit la HAUTEUR — la bande débordait alors de 20px. */
    flex: 0 0 auto;
    width: calc(100% + 40px);
    box-sizing: border-box;
    margin: 44px -20px -20px;
    padding: 22px 22px 26px;
    background: var(--bg-panel);
    border: none;
    border-top: 1px solid var(--accent);           /* jumeau du liseré du header */
    box-shadow: 0 -2px 20px rgba(0, 0, 0, .5), 0 -1px 0 rgba(245, 184, 64, .2);
}
/* Pas de `position`/`z-index` ici, volontairement. Le pied de page ne se
   superpose à rien : sur les pages à sidebar il vient APRÈS `.page-row`
   (cf. ci-dessous et `ftrWrapPageRow` dans js/footer.js), qui borne le sticky
   de la sidebar. Lui donner un z-index le ferait passer par-dessus la sidebar
   et bloquerait le bouton « Sauvegarde Globale ». */

/* Le hub a un padding de 40px en bas (§5), pas 20 : sa marge négative doit
   suivre, sinon la bande flotte 20px au-dessus du bord. */
.hub-body .site-footer { margin-bottom: -40px; }

/* Contenu centré sur la même laize que le hub (1200) et les pages BDD (1120),
   pour qu'il tombe sous le contenu de la page plutôt que collé au bord. */
.sf-inner { max-width: 1240px; margin: 0 auto; }

/* Le bouton « Sauvegarde Globale » reste fixé en bas à droite sur desktop
   (z-index 9000) : on lui réserve sa place au lieu de passer dessous. */
@media (min-width: 601px) {
    .site-footer.sf-has-fab .sf-inner { padding-right: 270px; }
}


/* ---- Les trois destinations ---- */
/* Colonnes plafonnées : sur un écran large, trois liens étirés à 1fr feraient
   des pavés de 600px. Ils gardent une largeur de bouton et restent groupés
   à gauche, sous le contenu de la page. */
.sf-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 290px));
    justify-content: start;
    gap: 10px;
}

.sf-link {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 44px;                      /* cible tactile */
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    /* Fond en retrait sur le panel : le sous-titre en --text-muted y tient
       le seuil de contraste 4.5:1 dans les deux thèmes (4.4:1 sur
       --control-bg, trop juste). */
    background: var(--bg-dark);
    color: var(--text-light);
    text-decoration: none;
    transition: border-color .15s, transform .1s, background-color .15s;
}
.sf-link:hover,
.sf-link:focus-visible { border-color: var(--accent); transform: translateY(-1px); }
.sf-link.is-here { border-color: var(--accent); background: var(--input-bg); }

.sf-link .ftr-ic { flex-shrink: 0; color: var(--accent); }
.sf-link-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sf-link-label { font-weight: 600; font-size: 14px; }
.sf-link-sub { color: var(--text-muted); font-size: 12.5px; line-height: 1.35; }
.sf-ext { font-size: 11px; margin-left: 5px; color: var(--text-muted); }

/* ---- Mention légale ---- */
.sf-legal {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 12.5px;
    line-height: 1.5;
}
.sf-legal-line { color: var(--text-light); }
.sf-version {
    display: inline-block;
    margin: 0 2px;
    padding: 1px 7px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--control-bg);
    color: var(--accent);
    font-size: 11.5px;
    font-weight: 700;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}
.sf-version:hover { border-color: var(--accent); }

@media (max-width: 600px) {
    .site-footer { margin-top: 28px; padding: 16px 16px 20px; }
    .sf-links { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .sf-link { transition: none; }
    .sf-link:hover, .sf-link:focus-visible { transform: none; }
}


/* ============================================================================
   PAGES INSTITUTIONNELLES — À propos (.ab-*) & Nouveautés (.cl-*)
   ============================================================================
   Les deux réutilisent le gabarit .db-page / .db-section des pages Base de
   Données (css/db.css) ; seuls les blocs qui leur sont propres sont ici.
   ============================================================================ */

/* ---- À propos ---- */
.ab-p { color: var(--text-light); font-size: 15px; line-height: 1.7; margin: 0 0 16px; max-width: 74ch; }
.ab-sign { color: var(--accent); font-size: 15px; font-weight: 600; margin: 22px 0 0; }
.ab-list { margin: 0; padding-left: 20px; max-width: 78ch; }
.ab-list li { color: var(--text-muted); font-size: 14px; line-height: 1.65; margin-bottom: 12px; }
.ab-list li b { color: var(--text-light); }
.ab-cta {
    display: inline-flex; align-items: center; min-height: 42px;
    padding: 9px 18px; border: 1px solid var(--accent); border-radius: 22px;
    color: var(--accent); text-decoration: none; font-weight: 600; font-size: 14px;
    transition: background-color .15s, color .15s;
}
.ab-cta:hover, .ab-cta:focus-visible { background: var(--accent); color: #0a0a0a; }

/* ---- Nouveautés : une version = un jalon de la frise ---- */
.cl-count { color: var(--text-muted); font-size: 13px; margin: 0 0 22px; }

.cl-list { list-style: none; margin: 0; padding: 0 0 0 26px; position: relative; }
/* Le trait de la frise, derrière les pastilles de version. */
.cl-list::before {
    content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px;
    width: 2px; background: var(--border);
}

.cl-item { position: relative; margin-bottom: 34px; }
.cl-item::before {
    content: ''; position: absolute; left: -26px; top: 6px;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--bg-dark); border: 2px solid var(--border);
}
.cl-item:first-child::before { border-color: var(--accent); background: var(--accent); }

.cl-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.cl-ver {
    padding: 2px 9px; border-radius: 20px;
    background: var(--control-bg); border: 1px solid var(--border);
    color: var(--accent); font-size: 12px; font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.cl-date { color: var(--text-muted); font-size: 12.5px; }
.cl-latest {
    padding: 2px 9px; border-radius: 20px;
    background: rgba(245, 184, 64, .12); border: 1px solid var(--accent);
    color: var(--accent); font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
}
.cl-title { color: var(--text-light); font-size: 17px; margin: 8px 0 12px; }

.cl-changes { list-style: none; margin: 0; padding: 0; }
.cl-change {
    display: flex; align-items: flex-start; gap: 11px;
    padding: 9px 0; border-top: 1px solid var(--border);
}
.cl-tag {
    flex-shrink: 0; min-width: 92px; text-align: center;
    padding: 3px 9px; border-radius: 6px;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
}
.cl-tag.is-new      { background: rgba(245, 184, 64, .14); color: var(--accent);  border: 1px solid var(--accent); }
.cl-tag.is-improved { background: rgba(78, 205, 196, .12); color: var(--success); border: 1px solid var(--success); }
.cl-tag.is-fixed    { background: rgba(255, 140, 66, .12); color: var(--warning); border: 1px solid var(--warning); }
.cl-text { color: var(--text-muted); font-size: 14px; line-height: 1.6; min-width: 0; }
.cl-link { color: var(--accent); text-decoration: none; white-space: nowrap; font-weight: 600; }
.cl-link:hover { text-decoration: underline; }
.cl-error { color: var(--warning); font-size: 14px; line-height: 1.6; }

@media (max-width: 600px) {
    .cl-list { padding-left: 20px; }
    .cl-item::before { left: -20px; }
    .cl-change { flex-direction: column; gap: 6px; }
    .cl-tag { min-width: 0; align-self: flex-start; }
}

/* Thème clair : l'or et le turquoise de la charte tombent sous le seuil de
   contraste 4.5:1 en très petit corps gras (2,6:1 pour l'or sur son fond
   pâle). Les pastilles de version et les étiquettes de type reçoivent donc
   des teintes assombries — uniquement là, la charte est inchangée ailleurs. */
[data-theme="light"] .cl-ver,
[data-theme="light"] .cl-latest,
[data-theme="light"] .sf-version   { color: #8a6410; }
[data-theme="light"] .cl-tag.is-new      { color: #8a6410; }
[data-theme="light"] .cl-tag.is-improved { color: #00695c; }
[data-theme="light"] .cl-tag.is-fixed    { color: #b23c00; }