/* ==================================================================
 *  style.css — Feuille de style globale du site Vault
 *  Thème "Bleu acier" : sombre, sobre, lisible.
 *  Aucun dégradé, aucune ombre décorative.
 * ================================================================== */

/* --- Variables de couleurs du thème --- */
:root {
    --fond-principal:   #0a0f1a;
    --fond-navbar:      #070b14;
    --fond-carte:       #0d1624;
    --bordure:          #142038;
    --texte-principal:  #b5d4f4;
    --texte-secondaire: #378add;
    --texte-discret:    #2a4a6a;
    --accent:           #185fa5;
    --accent-fonce:     #0c447c;
    --accent-clair:     #85b7eb;

    /* Boutons timer */
    --vert-fond:    #0f6e56;  --vert-texte:    #9fe1cb;
    --orange-fond:  #633806;  --orange-texte:  #fac775;
    --rouge-fond:   #791f1f;  --rouge-texte:   #f7c1c1;

    --rayon:        8px;
    --rayon-carte:  12px;
}

/* --- Réinitialisation de base --- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    background: var(--fond-principal);
    color: var(--texte-principal);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    min-height: 100vh;
}

a { color: var(--accent-clair); text-decoration: none; }
a:hover { color: #b8d8f7; }

/* ==================================================================
 *  BARRE DE NAVIGATION
 * ================================================================== */
.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--fond-navbar);
    border-bottom: 1px solid var(--bordure);
    padding: 8px 18px;
}
.navbar-logo { display: flex; align-items: center; gap: 8px; color: var(--accent-clair); }
.navbar-logo-img {
    width: 32px; height: 32px; object-fit: contain;
    /* Teinte bleue automatique pour s'harmoniser au thème */
    filter: drop-shadow(0 0 0 #85b7eb);
}
.navbar-logo-texte { font-weight: 700; letter-spacing: 2px; font-size: 18px; }
.navbar-droite { display: flex; align-items: center; gap: 14px; }
.navbar-admin {
    background: var(--accent-fonce); color: #e6f1fb;
    padding: 5px 12px; border-radius: var(--rayon); font-size: 13px;
}
.navbar-pseudo { display: flex; align-items: center; gap: 8px; color: var(--texte-principal); }
.navbar-deconnexion { color: var(--texte-secondaire); font-size: 13px; }

.avatar-mini {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--accent-fonce); color: #e6f1fb;
    font-size: 11px; font-weight: 700;
}

/* ==================================================================
 *  FIL D'ARIANE
 * ================================================================== */
.fil-ariane {
    padding: 10px 18px; font-size: 13px;
    color: var(--texte-discret);
    border-bottom: 1px solid var(--bordure);
}
.fil-ariane a { color: var(--texte-secondaire); }
.fil-sep { margin: 0 7px; color: var(--texte-discret); }
.fil-actif { color: var(--texte-principal); }

/* ==================================================================
 *  LAYOUT GÉNÉRAL (sidebar + contenu)
 * ================================================================== */
.layout { display: flex; align-items: flex-start; }
.contenu-principal { flex: 1; padding: 20px 24px; min-width: 0; }

/* ==================================================================
 *  SIDEBAR DES ÉQUIPES
 * ================================================================== */
.sidebar {
    width: 158px;
    flex-shrink: 0;
    background: var(--fond-navbar);
    border-right: 1px solid var(--bordure);
    min-height: calc(100vh - 90px);
    transition: width 0.22s ease;
    overflow: hidden;
}
.sidebar.reduit { width: 32px; }
.sidebar-toggle {
    width: 100%;
    background: var(--accent-fonce); color: #e6f1fb;
    border: none; cursor: pointer;
    padding: 8px 0; font-size: 14px;
}
.sidebar-contenu { padding: 10px 8px; }
.sidebar.reduit .sidebar-jeu-titre,
.sidebar.reduit .sidebar-equipe-nom,
.sidebar.reduit .sidebar-vide { display: none; }
.sidebar-jeu { margin-bottom: 14px; }
.sidebar-jeu-titre {
    display: block; font-size: 11px; text-transform: uppercase;
    color: var(--texte-secondaire); margin-bottom: 6px; letter-spacing: 1px;
}
.sidebar-equipe {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 6px; border-radius: var(--rayon);
    color: var(--texte-principal); font-size: 13px;
}
.sidebar-equipe.actif { background: var(--accent-fonce); }
.point-equipe {
    display: inline-block; width: 12px; height: 12px;
    border-radius: 50%; flex-shrink: 0;
}
.sidebar-vide { font-size: 12px; color: var(--texte-discret); }

/* ==================================================================
 *  BOUTONS (toujours visibles, jamais transparents)
 * ================================================================== */
.btn-retour {
    display: inline-block;
    background: #0c447c; color: #e6f1fb;
    border: 1px solid #185fa5;
    padding: 7px 14px; border-radius: var(--rayon);
    font-size: 13px; margin-bottom: 16px;
}
.btn-retour:hover { color: #fff; background: #105397; }

.btn, .btn-principal {
    background: var(--accent-fonce); color: #e6f1fb;
    border: none; padding: 8px 16px; border-radius: var(--rayon);
    font-size: 13px; cursor: pointer; display: inline-block;
}
.btn-principal:hover { background: #105397; }

.btn-secondaire {
    background: var(--fond-principal); color: var(--accent-clair);
    border: 0.5px solid var(--bordure); padding: 8px 16px;
    border-radius: var(--rayon); font-size: 13px; cursor: pointer;
}

.btn-kanban-plus {
    background: #0a1020; color: var(--accent-clair);
    border: 1px solid var(--accent); padding: 8px 16px;
    border-radius: var(--rayon); font-size: 13px; cursor: pointer;
}

.btn-vert   { background: var(--vert-fond);   color: var(--vert-texte);   border: none; padding: 7px 14px; border-radius: var(--rayon); cursor: pointer; }
.btn-orange { background: var(--orange-fond); color: var(--orange-texte); border: none; padding: 7px 14px; border-radius: var(--rayon); cursor: pointer; }
.btn-rouge  { background: var(--rouge-fond);  color: var(--rouge-texte);  border: none; padding: 7px 14px; border-radius: var(--rayon); cursor: pointer; }

/* ==================================================================
 *  CARTES ET KANBAN
 * ================================================================== */
.titre-page { font-size: 22px; color: var(--texte-principal); margin-bottom: 4px; }
.sous-titre { color: var(--texte-secondaire); font-size: 13px; margin-bottom: 18px; }

.kanban {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}
@media (max-width: 900px) { .kanban { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .kanban { grid-template-columns: 1fr; } }

.carte {
    background: var(--fond-carte);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-carte);
    padding: 16px;
}
.carte-jeu, .carte-page {
    display: flex; flex-direction: column; align-items: center;
    gap: 10px; text-align: center; cursor: pointer;
    transition: border-color 0.15s ease;
}
.carte-jeu:hover, .carte-page:hover { border-color: var(--accent); }
.carte-logo {
    width: 48px; height: 48px; object-fit: contain;
    background: #0a1020; border-radius: var(--rayon);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
}
/* Logo des jeux (Hub) agrandi 5× */
.carte-jeu .carte-logo { width: 240px; height: 240px; font-size: 110px; }
.carte-jeu .carte-logo img { width: 100%; height: 100%; object-fit: contain; }
.carte-page .carte-logo { width: 32px; height: 32px; font-size: 16px; }
.carte-nom { font-weight: 600; color: var(--texte-principal); }
.badge-equipes {
    font-size: 11px; color: var(--texte-secondaire);
    background: #0a1020; padding: 2px 8px; border-radius: 10px;
}

/* ==================================================================
 *  SECTION ÉQUIPES (sous le kanban)
 * ================================================================== */
.section-equipes { margin-top: 18px; }
.section-titre { font-size: 16px; margin-bottom: 10px; color: var(--texte-principal); }
.info-masquees {
    font-size: 12px; color: var(--texte-discret);
    background: var(--fond-carte); border: 1px solid var(--bordure);
    padding: 8px 12px; border-radius: var(--rayon); margin-bottom: 12px;
}
.equipe-ligne {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--fond-carte); border: 1px solid var(--bordure);
    padding: 10px 14px; border-radius: var(--rayon); margin-bottom: 8px;
}

/* ==================================================================
 *  TABLEAUX (type tableur, éditables)
 * ================================================================== */
.tableur-conteneur { overflow-x: auto; border: 1px solid var(--bordure); border-radius: var(--rayon); }
table.tableur { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tableur th {
    background: var(--fond-navbar); color: var(--texte-secondaire);
    text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--bordure);
    font-weight: 600; white-space: nowrap;
}
table.tableur td {
    padding: 0; border-bottom: 1px solid var(--bordure);
    border-right: 1px solid var(--bordure);
}
table.tableur td .cellule {
    padding: 8px 10px; min-height: 34px; outline: none; width: 100%;
}
table.tableur td .cellule[contenteditable="true"]:focus {
    background: #0a1020; box-shadow: inset 0 0 0 1px var(--accent);
}
table.tableur td.calcul { background: #0a1424; color: var(--texte-secondaire); }
table.tableur tr:hover td { background: rgba(20, 32, 56, 0.25); }

.cellule-select { width: 100%; background: transparent; color: var(--texte-principal);
    border: none; padding: 8px 10px; cursor: pointer; }
.cellule-input { width: 100%; background: transparent; color: var(--texte-principal);
    border: none; padding: 8px 10px; }

/* Badges Tier (Donjon) */
.badge-tier { padding: 2px 9px; border-radius: 10px; font-size: 12px; font-weight: 600; }
.tier-T8 { background: #042c53; color: #85b7eb; }
.tier-T7 { background: #0f2820; color: #5dcaa5; }
.tier-T6 { background: #251e10; color: #ef9f27; }
.tier-T5 { background: #2a1530; color: #d090e0; }
.tier-T4 { background: #1a1a22; color: #9aa6c0; }
.tier-T3 { background: #14222a; color: #7fc3d4; }
.tier-T2 { background: #1a2218; color: #9ac487; }

/* Badges Vendu / Non vendu (Doftabula) */
.badge-vendu     { background: #0f2820; color: #5dcaa5; padding: 2px 9px; border-radius: 10px; }
.badge-non-vendu { background: #251e10; color: #ef9f27; padding: 2px 9px; border-radius: 10px; }

.btn-suppr-ligne {
    background: transparent; color: var(--rouge-texte); border: none;
    cursor: pointer; font-size: 15px; padding: 6px 10px;
}

/* Champ "Loot total" : nombres alignés à droite */
.cellule-nombre { text-align: right; font-variant-numeric: tabular-nums; }

/* ==================================================================
 *  PAGE PRIX (Albion) — suivi des prix par ville
 * ================================================================== */
.prix-filtres { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.prix-filtres .champ-inline { min-width: 200px; }
.prix-item-ligne { cursor: default; }
.prix-item-nom { color: #85b7eb; font-weight: 500; }
.badge-ench { padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; }
/* Colonnes "Acheter à" / "Vendre à" : ville + prix l'un sous l'autre */
.prix-meilleure-ville { white-space: nowrap; }
.prix-meilleure-ville .prix-ville-nom-mini { display: block; font-size: 12px; color: var(--texte-secondaire); }
.prix-meilleure-ville .prix-achat { color: #5dcaa5; }
.prix-meilleure-ville .prix-vente { color: #efb827; }

/* Vue détail : grille des 6 villes */
.prix-villes {
    display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 12px; margin-bottom: 16px;
}
@media (max-width: 760px) { .prix-villes { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 480px) { .prix-villes { grid-template-columns: 1fr; } }
.prix-ville-carte {
    background: var(--fond-carte); border: 1px solid var(--bordure);
    border-radius: var(--rayon); padding: 12px 14px; cursor: pointer;
    transition: border-color 0.15s ease;
}
.prix-ville-carte:hover { border-color: var(--accent); }
.prix-ville-nom { font-weight: 700; color: var(--texte-principal); margin-bottom: 8px; }
.prix-ligne { display: flex; justify-content: space-between; font-size: 13px; padding: 2px 0; color: var(--texte-secondaire); }
.prix-ligne .prix-achat { color: #5dcaa5; }
.prix-ligne .prix-vente { color: #efb827; }
.prix-date { font-size: 11px; color: var(--texte-discret); margin-top: 6px; }
.prix-histo-onglets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.prix-decl-onglets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
/* Badges de déclinaison (T4.1) dans la liste */
.decl-badge { display: inline-flex; align-items: center; gap: 2px; margin: 2px 4px 2px 0; }

/* ==================================================================
 *  PAGE REGISTRE D'ENCHANTEMENT (Albion)
 * ================================================================== */
.lot-carte {
    background: #0c2036; border: 1px solid #185fa5; border-radius: var(--rayon);
    padding: 12px 14px; margin-bottom: 10px;
}
.lot-entete { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lot-item { font-weight: 700; color: var(--accent-clair); }
.lot-mats { margin: 6px 0; }
.lot-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 13px; }
.lot-actions .champ-inline { width: 130px; }
.lot-vendu-label { display: flex; align-items: center; gap: 6px; cursor: pointer; }

/* Rappel "à relancer" : fond ambré (attention) */
.rappel-carte {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
    background: #251e10; border: 1px solid #ef9f27; border-radius: var(--rayon);
    padding: 10px 14px; margin-bottom: 8px;
}
.rappel-actions { display: flex; align-items: center; gap: 8px; }
.rappel-actions .champ-inline { width: 80px; }

/* Historique triable */
#reg-histo-table th.tri:hover { color: var(--accent-clair); }

/* ==================================================================
 *  PAGE PRIX v2 (Albion) — recherche + prix AODP
 * ================================================================== */
.prix-cache-compteur { font-size: 12px; color: var(--texte-secondaire); margin-left: auto; }
.prix-resultats { display: flex; flex-direction: column; gap: 10px; }
.prix-item-carte {
    background: #060c16; border: 1px solid #16233a; border-radius: var(--rayon); padding: 12px 14px;
}
.prix-item-tete { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.prix-item-nom { font-weight: 600; color: var(--texte-principal); }
.prix-ench-boutons { display: flex; flex-wrap: wrap; gap: 6px; }
.prix-ench-btn {
    background: #060c16; color: #5f6c7d; border: 1px solid #16233a;
    border-radius: var(--rayon); padding: 5px 12px; cursor: pointer; font-size: 13px;
}
.prix-ench-btn:hover { color: var(--texte-secondaire); }
/* Enchant sélectionné (tableau ouvert) */
.prix-ench-btn.actif { background: #0c447c; color: #b5d4f4; border: 2px solid #185fa5; }
.prix-tableau-ville { margin-top: 10px; }
.prix-tableau-ville table { font-size: 13px; }
.prix-cell { cursor: pointer; }
.prix-cell:hover { background: rgba(24, 95, 165, 0.15); }
.prix-src-api { color: #5dcaa5; font-size: 12px; }
.prix-src-manual { color: #85b7eb; font-size: 12px; }

/* ==================================================================
 *  PAGE CRAFT (Albion) — calculatrice de rentabilité
 * ================================================================== */
.craft-info-bar {
    display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
    background: var(--fond-carte); border: 1px solid var(--bordure);
    border-radius: var(--rayon); padding: 10px 14px; margin-bottom: 16px;
    font-size: 12px; color: var(--texte-secondaire);
}
.craft-config { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
@media (max-width: 600px) { .craft-config { grid-template-columns: 1fr; } }

/* Boutons toggle (type bonus, items, focus) */
.craft-toggles { display: flex; flex-wrap: wrap; gap: 8px; }
.craft-toggle {
    background: #060c16; color: #2a3e58; border: 1px solid #111d2e;
    border-radius: var(--rayon); padding: 8px 14px; cursor: pointer; font-size: 13px;
}
.craft-toggle:hover { color: var(--texte-secondaire); }
.craft-toggle.actif {
    background: #0c2d52; color: #b5d4f4; border: 2px solid #185fa5;
}
.craft-city-pill {
    background: #0c2d52; color: #85b7eb; border: 1px solid #185fa5;
    border-radius: 12px; padding: 2px 10px; font-size: 12px;
}

/* Tableau des ingrédients */
table.craft-table .craft-mat { color: #85b7eb; font-weight: 500; }
table.craft-table input { width: 90px; background: #0a1020; color: var(--texte-principal);
    border: 1px solid var(--bordure); border-radius: 6px; padding: 5px 7px; text-align: right; }
table.craft-table .craft-total-qte { color: var(--texte-discret); }
table.craft-table .craft-cout { color: #7aabda; font-weight: 500; }

.craft-price-block .champ-config { max-width: 360px; }

/* Métriques */
.craft-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.craft-metric {
    background: #0a1020; border: 1px solid var(--bordure);
    border-radius: var(--rayon); padding: 10px 14px;
    display: flex; flex-direction: column; gap: 4px;
}
.craft-metric .label { font-size: 12px; color: var(--texte-secondaire); }
.craft-metric .val { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.craft-metric .val.blue  { color: #378add; }
.craft-metric .val.gold  { color: #efb827; }
.craft-metric .val.green { color: #5dcaa5; }
.craft-metric .val.red   { color: #c04a4a; }
.craft-metric-final { grid-column: 1 / -1; border-color: var(--accent); }
.craft-metric-final .val { font-size: 22px; }

/* ==================================================================
 *  PAGE ENCHANTEMENT (Albion) — calculatrice
 * ================================================================== */
/* Grille : les 3 cartes (Runes, Âmes, Reliques) côte à côte */
.ench-cartes {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px; max-width: 1100px;
}
@media (max-width: 900px) { .ench-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .ench-cartes { grid-template-columns: 1fr; } }
.ench-carte {
    background: var(--fond-carte); border: 1px solid var(--bordure);
    border-radius: var(--rayon-carte); padding: 16px;
}
.ench-entete { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ench-icone {
    width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    border-radius: var(--rayon); font-size: 20px; overflow: hidden; flex-shrink: 0;
}
.ench-icone img { width: 100%; height: 100%; object-fit: contain; }
.ench-titre { font-size: 17px; font-weight: 700; }
/* Accents par matériau */
.ench-runes    .ench-icone { background: #042c53; color: #85b7eb; }
.ench-runes    .ench-titre { color: #85b7eb; }
.ench-ames     .ench-icone { background: #26215c; color: #afa9ec; }
.ench-ames     .ench-titre { color: #afa9ec; }
.ench-reliques .ench-icone { background: #412402; color: #fac775; }
.ench-reliques .ench-titre { color: #fac775; }

table.ench-table { width: 100%; border-collapse: collapse; font-size: 13px; }
table.ench-table th {
    text-align: left; color: var(--texte-secondaire); font-size: 12px;
    padding: 6px 8px; border-bottom: 1px solid var(--bordure);
}
table.ench-table th:nth-child(2), table.ench-table th:nth-child(3),
table.ench-table td:nth-child(2), table.ench-table td:nth-child(3) { text-align: right; }
table.ench-table td { padding: 6px 8px; border-bottom: 1px solid var(--bordure); }
.ench-cout { color: var(--texte-discret); font-size: 11px; margin-left: 6px; }
.ench-qte {
    width: 70px; height: 38px; text-align: right;
    background: var(--fond-principal); color: #e6f1fb;
    border: 1px solid var(--bordure); border-radius: 6px; padding: 4px 8px;
    font-variant-numeric: tabular-nums;
}
.ench-sous-total { color: var(--texte-principal); }
/* Ligne de total séparée par une bordure dans l'accent de la carte */
.ench-total-ligne td { font-weight: 700; padding-top: 10px; border-bottom: none; }
.ench-runes    .ench-total-ligne td { border-top: 2px solid #85b7eb; }
.ench-ames     .ench-total-ligne td { border-top: 2px solid #afa9ec; }
.ench-reliques .ench-total-ligne td { border-top: 2px solid #fac775; }
.ench-total { font-size: 15px; }

/* ==================================================================
 *  GRAND-LIVRE DES DONJONS (page Donjon, Albion)
 * ================================================================== */
/* Titre façon registre ancien */
.titre-livre { letter-spacing: 0.5px; }

/* Champ inline (création session, butin, frais) */
.champ-inline {
    background: #0a1020; color: var(--texte-principal);
    border: 1px solid var(--bordure); border-radius: var(--rayon);
    padding: 7px 10px; font-size: 13px;
}
.champ-inline.loot-montant, .champ-inline.nourr-prix,
.champ-inline.nourr-qte, .frais-ajout-input {
    text-align: right; font-variant-numeric: tabular-nums; max-width: 130px;
}
.champ-inline.nourr-qte { max-width: 70px; }
.frais-ajout-input { max-width: 110px; }
/* Retour visuel d'erreur de validation (cf. UX du livredonjons.md) */
.champ-erreur { border-color: var(--rouge-fond) !important; box-shadow: 0 0 0 1px var(--rouge-fond); }

/* Police monospace pour tous les montants (esprit comptable) */
.mono { font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-variant-numeric: tabular-nums; }

/* Carte d'une session active */
.session-carte {
    background: var(--fond-carte); border: 1px solid var(--bordure);
    border-radius: var(--rayon-carte); padding: 16px; margin-bottom: 16px;
}
.session-entete { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.session-donjon { font-size: 18px; font-weight: 700; color: var(--accent-clair); }
/* Bouton réduire/déployer une session */
.btn-reduire-session {
    background: var(--accent-fonce); color: #e6f1fb; border: none;
    border-radius: var(--rayon); width: 26px; height: 26px; cursor: pointer;
    font-size: 13px; line-height: 1; transition: transform 0.15s ease;
}
/* Session réduite : on masque le corps, on ne garde que l'entête (titre) */
.session-carte.reduit .session-corps { display: none; }
.session-carte.reduit { margin-bottom: 8px; }
.session-carte.reduit .session-entete { margin-bottom: 0; }
.session-carte.reduit .btn-reduire-session { transform: rotate(-90deg); }
.session-sous-bloc { border-top: 1px solid var(--bordure); padding-top: 12px; margin-top: 12px; }

/* Journal du butin */
.loot-journal { list-style: none; margin-top: 8px; }
.loot-journal li {
    display: flex; align-items: center; gap: 10px;
    padding: 4px 0; border-bottom: 1px solid var(--bordure); font-size: 13px;
}
.loot-label-txt { color: var(--texte-secondaire); }
.loot-heure { color: var(--texte-discret); font-size: 12px; margin-left: auto; }
.btn-suppr-mini {
    background: transparent; color: var(--rouge-texte); border: none;
    cursor: pointer; font-size: 16px; line-height: 1; padding: 0 4px;
}

/* Participant */
.participant-carte {
    background: #0a1020; border: 1px solid var(--bordure);
    border-radius: var(--rayon); padding: 10px 12px; margin-top: 10px;
}
.participant-entete { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.frais-ligne { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.frais-label { font-size: 12px; color: var(--texte-secondaire); min-width: 90px; }
.frais-x { color: var(--texte-discret); }
.frais-puce {
    display: inline-flex; align-items: center; gap: 4px;
    background: #14213a; border: 1px solid var(--bordure);
    border-radius: 10px; padding: 2px 6px; font-size: 12px;
}

/* Récapitulatif de session — signature "grand livre" (double trait dessous) */
.recap-livre {
    display: flex; gap: 22px; flex-wrap: wrap; justify-content: flex-end;
    margin-top: 14px; padding-top: 10px;
    border-top: 1px solid var(--bordure);
    font-size: 13px; color: var(--texte-secondaire);
}
.recap-livre .recap-final {
    border-top: 3px double var(--accent-clair); padding-top: 4px;
    color: var(--texte-principal); font-weight: 700;
}

/* Historique : lignes cliquables + détail */
.histo-ligne { cursor: pointer; }
.histo-ligne:hover td { background: rgba(20, 32, 56, 0.4); }
.tableur-detail { margin: 6px 0; background: #0a1020; }
.detail-ventilation td { color: var(--texte-discret); font-size: 12px; }
.total-recu { color: var(--vert-texte); font-weight: 700; }

/* Tampon "RÉGLÉ" légèrement penché */
.tampon-regle {
    display: inline-block; margin: 8px; padding: 3px 12px;
    border: 2px solid var(--vert-fond); color: var(--vert-texte);
    border-radius: 6px; font-weight: 800; letter-spacing: 2px;
    transform: rotate(-6deg); opacity: 0.8; font-size: 13px;
}

.barre-actions { margin: 14px 0; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ==================================================================
 *  TIMER (page Donjon)
 * ================================================================== */
.timer-bloc {
    display: flex; align-items: center; gap: 12px;
    background: var(--fond-carte); border: 1px solid var(--bordure);
    border-radius: var(--rayon); padding: 12px 16px; margin-bottom: 16px;
}
.timer-affichage { font-size: 26px; font-variant-numeric: tabular-nums; color: var(--texte-principal); }

/* ==================================================================
 *  RÉCAPITULATIFS (cartes de totaux)
 * ================================================================== */
.recap-cartes { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.recap-carte {
    background: var(--fond-carte); border: 1px solid var(--bordure);
    border-radius: var(--rayon); padding: 12px 16px; min-width: 150px;
}
.recap-carte .label { font-size: 12px; color: var(--texte-secondaire); }
.recap-carte .valeur { font-size: 20px; font-weight: 700; }
.valeur-positive { color: var(--vert-texte); }
.valeur-negative { color: var(--orange-texte); }

/* Bannière profit (Mapping) */
.banniere-profit {
    background: var(--fond-carte); border: 1px solid var(--bordure);
    border-radius: var(--rayon-carte); padding: 18px 22px; margin-bottom: 18px;
    text-align: center;
}
.banniere-profit .grand { font-size: 36px; font-weight: 800; }
.banniere-profit .detail { font-size: 13px; color: var(--texte-discret); margin-top: 4px; }

/* Bloc de configuration / résultats */
.bloc {
    background: var(--fond-carte); border: 1px solid var(--bordure);
    border-radius: var(--rayon-carte); padding: 16px; margin-bottom: 16px;
}
.bloc-entete { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.bloc-titre { font-size: 15px; color: var(--texte-principal); }
.bloc-total { font-size: 14px; color: var(--accent-clair); font-weight: 700; }
.champ-config { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.champ-config label { font-size: 12px; color: var(--texte-secondaire); }
.champ-config input {
    background: #0a1020; color: var(--texte-principal);
    border: 1px solid var(--bordure); border-radius: var(--rayon);
    padding: 7px 10px;
}

/* Cartes de statut Cap Rési */
.cartes-resi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
@media (max-width: 700px) { .cartes-resi { grid-template-columns: repeat(2, 1fr); } }
.carte-resi { border-radius: var(--rayon); padding: 12px 14px; border: 1px solid var(--bordure); }
.carte-resi.cape    { background: #0f2820; border-color: #1d9e75; }
.carte-resi.non-cape{ background: #200a0a; border-color: #a32d2d; }
.carte-resi .elem { font-size: 13px; font-weight: 700; }
.carte-resi .val  { font-size: 22px; font-weight: 800; }
.carte-resi .etat { font-size: 12px; }
.col-fire      { color: #f07030; }
.col-cold      { color: #85b7eb; }
.col-lightning { color: #f0d030; }
.col-chaos     { color: #d04090; }

/* ==================================================================
 *  FORMULAIRES & PAGE DE CONNEXION
 * ================================================================== */
.page-connexion {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; min-height: 100vh; padding: 20px;
}
.connexion-logo { width: 132px; height: 132px; object-fit: contain; margin-bottom: 12px; }
.connexion-titre { font-size: 26px; letter-spacing: 3px; font-weight: 800; margin-bottom: 20px; color: var(--accent-clair); }
.connexion-cartes { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; width: 100%; max-width: 760px; }
.carte-form {
    background: var(--fond-carte); border: 1px solid var(--bordure);
    border-radius: var(--rayon-carte); padding: 22px; flex: 1; min-width: 300px;
}
.carte-form h2 { font-size: 17px; margin-bottom: 14px; color: var(--texte-principal); }
.champ { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.champ label { font-size: 12px; color: var(--texte-secondaire); }
.champ input {
    background: #0a1020; color: var(--texte-principal);
    border: 1px solid var(--bordure); border-radius: var(--rayon);
    padding: 9px 11px; font-size: 14px;
}
.champ input:focus { outline: none; border-color: var(--accent); }
.form-bouton-large { width: 100%; padding: 10px; margin-top: 6px; }

.message {
    padding: 10px 14px; border-radius: var(--rayon); margin-bottom: 14px; font-size: 13px;
}
.message.erreur  { background: #200a0a; border: 1px solid #a32d2d; color: #f7c1c1; }
.message.succes  { background: #0f2820; border: 1px solid #1d9e75; color: #9fe1cb; }
.message.info    { background: #0a1424; border: 1px solid var(--accent); color: var(--accent-clair); }

/* ==================================================================
 *  MODALES
 * ================================================================== */
.modal-fond {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.6); z-index: 50;
    align-items: center; justify-content: center; padding: 20px;
}
.modal-fond.ouvert { display: flex; }
.modal {
    background: var(--fond-carte); border: 1px solid var(--bordure);
    border-radius: var(--rayon-carte); padding: 22px; width: 100%; max-width: 420px;
}
.modal h3 { margin-bottom: 14px; color: var(--texte-principal); }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }

/* ==================================================================
 *  PAGE PROFIL & ADMIN
 * ================================================================== */
.profil-entete { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.avatar-grand {
    width: 64px; height: 64px; border-radius: 50%;
    background: var(--accent-fonce); color: #e6f1fb;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; font-weight: 700;
}
.avatars-membres { display: flex; }
.avatars-membres .avatar-mini { margin-left: -6px; border: 2px solid var(--fond-carte); }

.admin-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
table.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 12px; }
table.admin-table th, table.admin-table td {
    padding: 10px; border-bottom: 1px solid var(--bordure); text-align: left;
}
table.admin-table th { color: var(--texte-secondaire); }

/* Page Personnages (Dofus) */
.compte-carte {
    background: var(--fond-carte); border: 1px solid var(--bordure);
    border-radius: var(--rayon-carte); padding: 16px; margin-bottom: 14px;
}
.compte-entete { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.perso-ligne { border-top: 1px solid var(--bordure); padding: 10px 0; }
.perso-entete { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.perso-fleche { transition: transform 0.15s ease; }
.perso-fleche.ouvert { transform: rotate(90deg); }
.badge { padding: 2px 8px; border-radius: 10px; font-size: 11px; }
.badge-classe { background: #042c53; color: #85b7eb; }
.badge-level  { background: #0f2820; color: #5dcaa5; }
.badge-elem   { background: #251e10; color: #ef9f27; }
.dofus-liste { display: none; grid-template-columns: repeat(2, 1fr); gap: 4px; margin-top: 10px; }
.dofus-liste.ouvert { display: grid; }
.dofus-item { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.compteur-dofus { font-size: 12px; color: var(--texte-secondaire); }

/* ==================================================================
 *  PAGE EQUIPEMENT (Albion) — menu membre + tableau de ses équipements
 * ================================================================== */
.equip-selecteur {
    display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
}
.equip-selecteur label { font-size: 13px; color: var(--texte-secondaire); }

/* Tableau d'équipement : compact, défilable horizontalement */
table.equip-table { font-size: 12px; }
table.equip-table th { font-size: 11px; padding: 6px 7px; white-space: nowrap; }
.equip-piece { padding: 4px !important; }
.equip-piece input {
    display: block; width: 84px; background: #0a1020; color: var(--texte-principal);
    border: 1px solid var(--bordure); border-radius: 5px; padding: 3px 5px; margin: 2px 0;
    font-size: 11px;
}
.equip-montant { text-align: right; font-variant-numeric: tabular-nums; }
table.equip-table .cellule-input { min-width: 110px; }