/* style.css — Feuille de style principale Clans de l'Archipel.
   Style parchemin médiéval-fantastique, conforme CADRAGE F1-F3. */

/* ── Variables (palette CADRAGE F2 + F3) ──────────────────────── */
:root {
    /* Fonds */
    --color-bg: #F5F0E1;             /* Fond principal — parchemin */
    --color-bg-secondary: #E8DCC8;   /* Fond secondaire — brun clair */
    --color-bg-light: #FBF7EC;       /* Fond inputs/cartes claires */

    /* Texte */
    --color-text: #3E2723;           /* Texte principal — brun foncé */
    --color-text-muted: #6D4C41;     /* Texte atténué */

    /* Accents (CADRAGE F2) */
    --color-accent: #8B1A1A;         /* Accent principal — rouge sombre */
    --color-accent-dark: #6A1313;    /* Hover accent */
    --color-accent-secondary: #C5A55A; /* Alias explicite (= gold) */
    --color-gold: #C5A55A;           /* Accent secondaire — or */
    --color-success: #4A7C59;        /* Succès — vert */
    --color-error: #CC3333;          /* Erreur — rouge vif */
    --color-muted: #9E9E9E;          /* Grisé */
    --color-disabled: #9E9E9E;       /* Alias explicite (CADRAGE F2) */
    --color-border: #C8B99C;         /* Bordures — brun pâle */

    /* Races (CADRAGE F3) */
    --race-Humains: #2255AA;         /* Bleu royal */
    --race-Elfes: #2E7D32;           /* Vert forêt */
    --race-Nains: #CC8800;           /* Orange/bronze */
    --race-Orcs: #6B7A3A;            /* Vert olive */
    --race-Esclavagistes: #6A1B9A;   /* Violet */
    --race-Reptiliens: #C9A227;      /* Jaune/ocre */
    --race-Sauvageons: #4A90C4;      /* Bleu glacé */

    /* Typographie */
    --font-serif: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
    --font-title: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
    --font-base: var(--font-serif);

    /* Layout */
    --radius: 4px;
    --radius-card: 6px;
    --shadow: 0 2px 6px rgba(62, 39, 35, 0.18);
    --shadow-card: 0 2px 8px rgba(62, 39, 35, 0.12), inset 0 0 0 1px rgba(200, 185, 156, 0.4);
    --max-width: 1100px;
}

/* ── Reset léger ──────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;   /* ≥ 14px requis — CADRAGE F6 accessibilité */
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-base);
    background-color: var(--color-bg);
    color: var(--color-text);
    line-height: 1.5;
    min-height: 100vh;
}

/* Les sections masquées ne sont pas rendues (sécurité + accessibilité). */
[hidden] {
    display: none !important;
}

/* ── Barre de navigation ──────────────────────────────────────── */
.navbar {
    /* Sticky : reste collé en haut quand on scrolle, au-dessus du contenu */
    position: sticky;
    top: 0;
    z-index: 100;

    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0.75rem 1.5rem;
    min-height: 60px;
    background-color: var(--color-bg-secondary);
    border-bottom: 2px solid var(--color-border);
    box-shadow: var(--shadow);
    transition: box-shadow 0.2s ease;
}

/* Ombre plus marquée quand on a scrollé (toggle JS via .navbar-scrolled) */
.navbar.navbar-scrolled {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.nav-logo {
    font-family: var(--font-title);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-accent);
    text-decoration: none;
    margin-right: auto;
    letter-spacing: 0.04em;
    text-shadow: 1px 1px 0 rgba(62, 39, 35, 0.12);
}

.nav-logo:hover {
    color: var(--color-accent-dark);
}

/* ── Drawer / wrapper : display:contents en desktop pour laisser
      .nav-links et .nav-actions se ranger directement dans .navbar.
      Sur mobile (≤ 768px), bascule en panneau latéral fixé. ────── */
.nav-drawer {
    display: contents;
}

.nav-drawer-close {
    /* Bouton X visible uniquement quand le drawer est en mode mobile/ouvert */
    display: none;
}

.nav-links {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.nav-links a {
    color: var(--color-text);
    text-decoration: none;
    padding: 0.3rem 0.4rem;
    border-bottom: 2px solid transparent;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.nav-links a:hover {
    border-bottom-color: var(--color-accent);
    color: var(--color-accent-dark);
}

.nav-links a.active {
    border-bottom-color: var(--color-accent-dark);
    color: var(--color-accent-dark);
    font-weight: 600;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
}

.nav-username {
    color: var(--color-text-muted);
    font-style: italic;
}

/* Overlay sombre derrière le drawer (mobile) */
.nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 199;
    opacity: 0;
    transition: opacity 250ms ease;
}
.nav-overlay.nav-overlay-visible {
    display: block;
    opacity: 1;
}

/* ── Zone principale ──────────────────────────────────────────── */
.main-content {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.page {
    animation: fade-in 0.2s ease-out;
}

@keyframes fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Cartes ───────────────────────────────────────────────────── */
.card {
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: 2rem;
    max-width: 420px;
    margin: 1.5rem auto;
    box-shadow: var(--shadow-card);
}

.card-wide {
    max-width: 800px;
}

.card-title {
    margin: 0 0 1.25rem;
    font-size: 1.75rem;
    font-weight: 700;
    /* Respecte la couleur d'accent de la Maison/Clan si définie sur un
       ancêtre (--family-accent), sinon retombe sur l'accent global rouge.
       Évite que le nom de Maison reste en rouge alors que les autres
       éléments de la page suivent l'accent personnalisé. */
    color: var(--family-accent, var(--color-accent));
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.5rem;
}

.card-link {
    margin-top: 1.25rem;
    font-size: 0.95rem;
    text-align: center;
}

.card-link a {
    color: var(--color-accent);
    text-decoration: underline;
}

.placeholder {
    color: var(--color-text-muted);
    font-style: italic;
}

/* ── Formulaires ──────────────────────────────────────────────── */
form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

label {
    font-weight: 600;
    margin-top: 0.5rem;
    color: var(--color-text);
}

input[type="email"],
input[type="text"],
input[type="password"],
input[type="number"],
textarea {
    padding: 0.55rem 0.7rem;
    font-family: var(--font-base);
    font-size: 1rem;
    background-color: var(--color-bg-light);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(139, 26, 26, 0.2);
}

/* ── Boutons ──────────────────────────────────────────────────── */
.btn {
    padding: 0.6rem 1.1rem;
    font-family: var(--font-base);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: var(--radius);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.btn-primary {
    background-color: var(--color-accent);
    color: var(--color-bg);
    margin-top: 1rem;
}

.btn-primary:hover {
    background-color: var(--color-accent-dark);
}

.btn-ghost {
    background-color: transparent;
    color: var(--color-text);
    border-color: var(--color-border);
}

.btn-ghost:hover {
    background-color: var(--color-bg);
    border-color: var(--color-accent);
    color: var(--color-accent);
}

button:disabled,
.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ── Feedback ─────────────────────────────────────────────────── */
.feedback {
    margin-top: 0.75rem;
    min-height: 1.2em;
    font-size: 0.95rem;
}

.feedback.error {
    color: var(--color-error);
}

.feedback.success {
    color: var(--color-success);
}

/* ── Formulaire : select + actions ────────────────────────────── */
select {
    padding: 0.55rem 0.7rem;
    font-family: var(--font-base);
    font-size: 1rem;
    background-color: var(--color-bg-light);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

select:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(139, 26, 26, 0.2);
}

.form-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 1rem;
}

/* ── Éléments UX transversaux ─────────────────────────────────── */

.warning-box {
    background-color: #FFF8E1;
    border: 1px solid var(--color-gold);
    border-radius: var(--radius);
    padding: 0.65rem 0.9rem;
    color: var(--color-text);
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

/* ── Encadré "intro Maison" (page de fondation) ───────────────── */
/* Style citation : fond légèrement teinté + bordure gauche colorée + */
/* texte plus aéré que le warning-box pour un effet "mise en lumière". */
.maison-intro-box {
    margin: 0 0 1.4rem 0;
    padding: 1rem 1.2rem;
    background: #fbf3df;
    border-left: 4px solid var(--color-gold, #b88a2c);
    border-radius: 0 var(--radius) var(--radius) 0;
    color: var(--color-text);
    font-size: 1.02rem;
    line-height: 1.55;
    font-style: italic;
}
.maison-intro-box strong {
    color: #5a3d10;
    font-style: normal;
}
.maison-desc-hint {
    margin: 0.15rem 0 1.2rem 0;
}

.required { color: var(--color-error); }
.optional { color: var(--color-text-muted); font-weight: 400; font-style: italic; }

.hint {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    font-style: italic;
    margin-top: 0.25rem;
}

.section-desc {
    color: var(--color-text-muted);
    font-size: 0.95rem;
    margin: -0.5rem 0 1rem;
    line-height: 1.45;
}

.btn-sm {
    padding: 0.35rem 0.7rem;
    font-size: 0.88rem;
}

/* ── Inspiration (création famille) ──────────────────────────── */

.inspiration-box {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--color-border);
}

.inspi-cat {
    margin: 0.9rem 0 0.25rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-accent);
}

.inspi-list {
    margin: 0 0 0.5rem;
    padding-left: 1.4rem;
    font-size: 0.92rem;
    line-height: 1.5;
}

.inspi-list li {
    margin-bottom: 0.15rem;
}

.inspi-list strong {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: var(--color-border);
}

.inspi-list strong:hover {
    color: var(--color-accent);
    text-decoration-color: var(--color-accent);
}

/* ── Description famille (affichage + édition) ───────────────── */

.family-desc-section {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--color-border);
}

.family-desc-text {
    color: var(--color-text);
    font-style: italic;
    white-space: pre-wrap;
    margin: 0 0 0.5rem;
}

.family-desc-section textarea {
    width: 100%;
    font-family: var(--font-base);
    font-size: 0.95rem;
    padding: 0.55rem 0.7rem;
    background-color: var(--color-bg-light);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    resize: vertical;
}

/* ── Portraits ────────────────────────────────────────────────── */

.portrait {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid var(--color-border);
    object-fit: cover;
    background-color: var(--color-bg-secondary);
    flex-shrink: 0;
}

.portrait-lg {
    width: 128px;
    height: 128px;
}

.portrait-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-muted);
    font-size: 2rem;
}

.portrait-placeholder.portrait-lg {
    font-size: 3.5rem;
}

.portrait-edit-btn {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.82rem;
    color: var(--color-accent);
    cursor: pointer;
    text-decoration: underline;
    text-align: center;
    background: none;
    border: none;
    font-family: var(--font-base);
    padding: 0;
}

/* Modal portrait */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fade-in 0.15s ease-out;
}

.modal-content {
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: 0;             /* le header sticky et le body gèrent leur propre padding */
    max-width: 600px;
    width: 90%;
    max-height: 85vh;
    overflow: hidden;       /* le scroll est interne au .modal-scroll-body */
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    display: flex;
    flex-direction: column;
}

/* En-tête du modal : titre + boutons d'action, reste visible quand on scrolle */
.modal-sticky-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background-color: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    z-index: 1;
}

/* Corps scrollable du modal : seule cette zone défile */
.modal-scroll-body {
    overflow-y: auto;
    padding: 1rem 1.5rem 1.5rem;
    flex: 1 1 auto;
}

.modal-content h2 {
    margin: 0 0 1rem;
    color: var(--color-accent);
}

.modal-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 0.5rem;
    margin-top: 0.75rem;
}

/* Onglets race dans le modal portrait (Feature 3) */
.race-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0.5rem 0;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--color-border);
}
.race-tab {
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.3rem 0.7rem;
    font-family: var(--font-base);
    font-size: 0.88rem;
    color: var(--color-text);
    cursor: pointer;
    transition: background 0.1s, border-color 0.1s;
}
.race-tab:hover { border-color: var(--color-accent); }
.race-tab.active {
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
}
.race-tab-count {
    font-size: 0.78rem;
    opacity: 0.7;
}

.modal-gallery img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--radius);
    border: 2px solid var(--color-border);
    cursor: pointer;
    transition: border-color 0.15s;
}

.modal-gallery img:hover {
    border-color: var(--color-accent);
}

/* Pré-sélection : bordure accentuée + halo lumineux pour distinguer du hover */
.modal-gallery img.selected {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(139, 26, 26, 0.25);
    transform: scale(1.03);
}

/* ── Fiche général (page dédiée) — redesign ─────────────────── */

.general-detail-top {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.general-detail-info {
    flex: 1;
    min-width: 0;
}

.general-detail-portrait {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

/* Portrait grand format 2:3 (~200×300) sur la fiche général */
.general-detail-portrait-img {
    width: 200px;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    background-color: var(--color-bg-secondary);
    display: block;
}
.general-detail-portrait-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-muted);
    font-size: 4rem;
}

/* ── Page Famille publique (#family-public/{id}) ─────────────── */
/* Le container porte la couleur d'accent ; tous les enfants en héritent
   via la custom property. Permet la propagation immédiate après changement. */
#family-public-content {
    --family-accent: var(--color-accent);
}
#family-public-content .section-title,
#family-public-content .stat-value {
    color: var(--family-accent);
}
#family-public-content .section-title {
    border-bottom-color: color-mix(in srgb, var(--family-accent) 40%, var(--color-border));
}
#family-public-content .card.card-wide {
    border-color: color-mix(in srgb, var(--family-accent) 30%, var(--color-border));
    box-shadow: 0 2px 6px color-mix(in srgb, var(--family-accent) 15%, transparent);
}
#family-public-content .archives-table tr:hover {
    background-color: color-mix(in srgb, var(--family-accent) 8%, var(--color-bg-light));
}

.family-public-card {
    display: flex;
    align-items: stretch;
    gap: 0;
    background-color: var(--color-bg-light);
    border: 2px solid color-mix(in srgb, var(--family-accent) 35%, var(--color-border));
    border-radius: var(--radius);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--family-accent) 18%, transparent);
    overflow: hidden;
}
.family-public-body {
    flex: 1;
    min-width: 0;
    padding: 1.25rem 1.5rem;
}
.family-public-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}
.family-public-name {
    margin: 0;
    color: var(--family-accent);
    border: none;
    padding: 0;
}

/* ── Fiche général : 3 blocs verticaux (Identité / Description / Historique) ── */
.general-detail-block + .general-detail-block {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-border);
}
.general-detail-identity {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}
@media (max-width: 600px) {
    .general-detail-identity {
        flex-direction: column-reverse;
        align-items: center;
    }
}

/* Encadré famille COMPACT (dans le bloc 1) — lecture seule, pas de description */
.general-detail-family-compact {
    --family-accent: var(--color-accent);
    margin-top: 0.75rem;
    padding: 0.6rem 0.85rem;
    background-color: var(--color-bg-light);
    border-left: 3px solid var(--family-accent);
    border-radius: var(--radius);
    color: var(--color-text);
}
.general-detail-family-compact-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.95rem;
}
.general-detail-family-compact .family-link {
    color: var(--family-accent);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}
.general-detail-family-compact .family-link:hover {
    text-decoration: underline;
}
.general-detail-family-compact .general-detail-family-prestige {
    color: var(--family-accent);
    white-space: nowrap;
}

/* Encadré famille (rétro-compat — utilisé sur d'autres écrans) */
.general-detail-family-card {
    --family-accent: var(--color-accent);
    margin-top: 1.5rem;
    display: flex;
    align-items: stretch;
    gap: 0;
    background-color: var(--color-bg-light);
    border: 2px solid color-mix(in srgb, var(--family-accent) 35%, var(--color-border));
    border-radius: var(--radius);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--family-accent) 18%, transparent);
    overflow: hidden;
}
.general-detail-family-card .family-coa-banner {
    width: 60px;
    border-radius: 0;
    border-left: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
}
.general-detail-family-body {
    flex: 1;
    min-width: 0;
    padding: 0.75rem 1rem;
}
.general-detail-family-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    justify-content: space-between;
}
.general-detail-family-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 1rem;
    color: var(--color-text);
}
.general-detail-family-title .family-link {
    color: var(--family-accent);
    font-weight: 700;
    text-decoration: none;
}
.general-detail-family-title .family-link:hover {
    text-decoration: underline;
}
.general-detail-family-prestige {
    color: var(--family-accent);
    font-size: 0.95rem;
    white-space: nowrap;
}
.general-detail-family-card .family-coa-flag {
    height: 32px;
}

/* Conserve la classe historique pour rétro-compat */
.general-detail-family {
    margin-top: 1.5rem;
    padding: 0.75rem 1rem;
    background-color: var(--color-bg-light);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
}
.general-detail-family .family-link,
.general-detail-family-card .family-link {
    cursor: pointer;
}

@media (max-width: 600px) {
    .general-detail-top {
        flex-direction: column-reverse;
        align-items: center;
    }
}

/* ── Ma Famille ───────────────────────────────────────────────── */

/* Couleur d'accent de la famille (custom property définie par JS sur #family-view) */
#family-view {
    --family-accent: var(--color-accent);
}
#family-view .card-title,
#family-view .section-title,
#family-view .stat-value,
#family-view .slot-name {
    color: var(--family-accent);
}
#family-view .general-slot {
    border-color: color-mix(in srgb, var(--family-accent) 40%, var(--color-border));
}

/* Nom de famille rendu cliquable (apparence titre, souligné au survol).
   Utilise la couleur d'accent de la Maison partout où le nom apparaît. La
   custom property --family-accent est positionnée sur le container parent
   par le JS (ou héritée via les règles #family-view / #family-public-content). */
.family-name-link {
    text-decoration: none;
    color: var(--family-accent, var(--color-accent));
}
.family-name-link:hover {
    text-decoration: underline;
}

/* Devise de la famille — italique + semi-bold (600) pour rester lisible
   sans surcharger le rendu sur les polices à empattement. */
.family-motto {
    font-style: italic;
    font-weight: 600;
    color: var(--color-text-muted);
    margin: 0.25rem 0 0.5rem;
    font-size: 0.95rem;
}
.family-motto-edit-btn {
    display: inline;
    font-size: 0.8rem;
    color: var(--color-accent);
    cursor: pointer;
    text-decoration: underline;
    background: none;
    border: none;
    font-family: var(--font-base);
    padding: 0;
    margin-left: 0.5rem;
}

/* En-tête famille avec armoiries */
.family-header-inner {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}
.family-header-info {
    flex: 1;
    min-width: 0;
}

/* Bannière unifiée (rectangle horizontal ~3:1) — Maison + Clan.
   Trois tailles via classe modificateur. Le SVG est responsive
   (preserveAspectRatio). Voir BannerRenderer (frontend/js/banner_renderer.js). */
.banner {
    aspect-ratio: 3 / 1;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--color-border);
    flex-shrink: 0;
    background: var(--color-bg-light);
}
.banner.banner-sm { height: 28px; }
.banner.banner-md { height: 44px; }
.banner.banner-lg { height: 90px; }
.banner-svg, .banner-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.banner-motif {
    /* Le motif est appliqué via mask-image sur la couleur de fond — teinte
       n'importe quel SVG monochrome à la couleur choisie. */
    pointer-events: none;
}

/* Bandeau « titre + bannière » sur le header de Maison. */
.family-coa-flag-wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

/* Galerie armoiries dans le modal (carré) */
.modal-gallery-coa img {
    aspect-ratio: 1;
}

/* ── Modale éditeur de bannière (composant unifié Maison + Clan) ── */
.modal-banner-editor .banner-preview {
    margin: 0 0 1rem;
    display: flex;
    justify-content: center;
}
.modal-banner-editor .banner-preview .banner {
    height: 110px;
    aspect-ratio: 3 / 1;
}
.banner-extra-field {
    margin-bottom: 1rem;
}
.banner-extra-field label {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 600;
}
.banner-extra-field input[type="text"] {
    width: 100%;
    box-sizing: border-box;
}

.banner-tabs {
    display: flex;
    gap: 0.4rem;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 1rem;
}
.banner-tab {
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--color-border);
    border-bottom: none;
    background: var(--color-bg-light);
    cursor: pointer;
    border-radius: var(--radius) var(--radius) 0 0;
    font-size: 0.95rem;
    font-family: inherit;
}
.banner-tab.active {
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-bg);
    margin-bottom: -1px;
    font-weight: 700;
}

/* Slots de couleurs (1 à 3, chacun avec son propre picker palette) */
.banner-color-slots {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.4rem;
}
.banner-color-slot {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.5rem 0.6rem;
    background: var(--color-bg-light);
}
.banner-color-slot-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.4rem;
}
.banner-color-remove {
    background: none;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    width: 22px;
    height: 22px;
    cursor: pointer;
    color: var(--color-text-muted);
    line-height: 1;
}
.banner-color-remove:hover { color: var(--color-error); }
.banner-add-color { margin-top: 0.5rem; }

/* Grille palette : 8 colonnes × 2 lignes = 16 swatches */
.banner-palette-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 0.35rem;
    margin-bottom: 0.4rem;
}
.banner-swatch {
    width: 100%;
    aspect-ratio: 1;
    min-height: 28px;
    border: 2px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    padding: 0;
    position: relative;
    transition: border-color 0.15s, transform 0.1s;
}
.banner-swatch:hover { transform: scale(1.08); }
.banner-swatch.selected {
    border-color: var(--color-text);
    box-shadow: 0 0 0 2px var(--color-bg) inset;
}
.banner-swatch-white { border: 2px solid var(--color-border); }
.banner-swatch-white.selected { border-color: var(--color-text); }
.banner-custom-btn {
    border-style: dashed !important;
    width: 100%;
}
.banner-custom-btn.selected {
    border-style: solid !important;
    border-width: 2px !important;
    font-weight: 700;
}

.banner-orientation-row {
    display: flex;
    gap: 1rem;
    margin-top: 0.4rem;
}
.banner-orientation-row label { cursor: pointer; }

.banner-motifs-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}
.banner-motif-row {
    display: grid;
    grid-template-columns: 2fr 1fr auto auto;
    gap: 0.4rem;
    align-items: center;
}
.banner-motif-select {
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
    font-family: inherit;
    font-size: 0.9rem;
}
.banner-motif-color {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.banner-motif-color-btn {
    width: 28px;
    height: 28px;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
}
.banner-motif-color-hex {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    font-family: monospace;
}
.banner-motif-color-picker {
    grid-column: 1 / -1;
    padding: 0.5rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}
@media (max-width: 600px) {
    .banner-motif-row { grid-template-columns: 1fr; }
}

/* Sélecteur couleur accent */
.accent-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.5rem;
}
.accent-swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.1s;
}
.accent-swatch:hover,
.accent-swatch.selected {
    border-color: var(--color-text);
    transform: scale(1.15);
}
.accent-swatch.selected {
    outline: 2px solid var(--color-text);
    outline-offset: 2px;
}

/* ── Redesign slot général (portrait à gauche, boutons pleine largeur en bas) ── */
.general-slot {
    padding: 0;
    overflow: hidden;
    flex-direction: column !important;   /* override le row par défaut */
}

/* Zone haute : portrait à gauche + infos à droite */
.slot-top {
    display: flex;
    flex-direction: row;
    gap: 0;
    flex: 1;
    min-height: 180px;
}

.slot-portrait-side {
    flex-shrink: 0;
    width: 140px;
    height: 210px;            /* ratio 2:3 fixe */
    overflow: hidden;
    border-right: 1px solid var(--color-border);
    background-color: var(--color-bg-secondary);
}
.slot-portrait-side img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.slot-portrait-side .slot-portrait-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-muted);
    font-size: 2.2rem;
}

.slot-body {
    flex: 1;
    min-width: 0;
    padding: 0.9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.section-title {
    margin: 0 0 1rem;
    font-size: 1.3rem;
    font-family: var(--font-title);
    color: var(--color-accent);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.4rem;
}

.family-header .card-title {
    margin-bottom: 0.75rem;
}

.family-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.family-stats > div {
    display: flex;
    flex-direction: column;
    min-width: 90px;
}

.stat-label {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stat-value {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-accent);
}

/* ── Slots de généraux ────────────────────────────────────────── */

/* Grille de cartes à largeur fixe (400px) — toutes identiques peu importe
   le nombre par ligne. auto-fill avec largeur fixe laisse l'espace en trop
   vide à droite plutôt que d'étirer les cartes. */
.general-slots {
    display: grid;
    grid-template-columns: repeat(auto-fill, 400px);
    justify-content: start;
    gap: 1rem;
}

.general-slot {
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    background-color: var(--color-bg-light);
    display: flex;
    flex-direction: row;
    gap: 0;
    width: 400px;
    min-height: 260px;
}

/* Slot vide : aéré et centré verticalement */
.general-slot.empty {
    flex-direction: column !important;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 2rem 1rem;
    border-style: dashed;
    color: var(--color-text-muted);
    font-style: italic;
}
.general-slot.empty .empty-slot-label {
    font-size: 1rem;
}

.general-slot .slot-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}


.general-slot .slot-name {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-accent);
    text-decoration: none;
}

.general-slot .slot-name:hover {
    text-decoration: underline;
}

a.slot-name {
    cursor: pointer;
}

.general-slot .slot-class {
    color: var(--color-text-muted);
    font-style: italic;
    font-size: 0.95rem;
}

.general-slot .slot-stats {
    display: flex;
    gap: 1rem;
    font-size: 0.95rem;
    color: var(--color-text);
}

/* Boutons pleine largeur en bas de la carte, séparés du bloc portrait+infos */
.general-slot .slot-actions {
    display: flex;
    gap: 0;
    border-top: 1px solid var(--color-border);
    margin-top: 0;
    flex-wrap: nowrap;
}
.general-slot .slot-actions:empty {
    display: none;
}
.general-slot .slot-actions .btn {
    flex: 1 1 0;
    min-width: 0;            /* empêche le texte long d'agrandir la colonne */
    padding: 0.7rem 0.5rem;
    font-size: 0.95rem;
    border-radius: 0;
    border: none;
    margin: 0;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.general-slot .slot-actions .btn + .btn {
    border-left: 1px solid var(--color-border);
}

.badge {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 999px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.badge-available {
    background-color: var(--color-success);
    color: #fff;
}

.badge-in-game {
    background-color: var(--color-gold);
    color: var(--color-text);
}

.badge-revoked {
    background-color: var(--color-muted);
    color: #fff;
}

/* Badges RP simplifiés (fiche général publique) */
.badge-active {
    background-color: var(--color-gold);
    color: var(--color-text);
}

.badge-vacationing {
    background-color: var(--color-success);
    color: #fff;
}

/* Confirmation révocation (2 clics) */
.confirm-danger {
    background-color: var(--color-bg-light);
    border: 1px solid var(--color-error);
    border-radius: var(--radius);
    padding: 0.75rem;
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: var(--color-text);
}

.confirm-danger p {
    margin: 0 0 0.5rem;
}

/* ── Parties ouvertes ─────────────────────────────────────────── */
.open-games-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.open-game-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background-color: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    flex-wrap: wrap;
}

.open-game-row .game-name {
    font-weight: 700;
    color: var(--color-accent);
}

.open-game-row .game-meta {
    display: flex;
    gap: 1rem;
    color: var(--color-text-muted);
    font-size: 0.95rem;
    flex-wrap: wrap;
}

/* ── Archives (tableau) ──────────────────────────────────────── */
.archives-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.archives-table th,
.archives-table td {
    text-align: left;
    padding: 0.5rem 0.7rem;
    border-bottom: 1px solid var(--color-border);
}

.archives-table th {
    color: var(--color-text-muted);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
}

.archives-table tbody tr {
    cursor: pointer;
    transition: background-color 0.1s;
}

.archives-table tbody tr:hover {
    background-color: rgba(197, 165, 90, 0.15);
}

.archives-table tr.revoked {
    color: var(--color-muted);
    font-style: italic;
}

/* ── Fiche détaillée général ──────────────────────────────────── */
.general-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.general-history {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    font-size: 0.95rem;
}

.general-history th,
.general-history td {
    text-align: left;
    padding: 0.5rem 0.7rem;
    border-bottom: 1px solid var(--color-border);
}

.general-history tbody tr {
    cursor: pointer;
    transition: background-color 0.1s;
}

.general-history tbody tr:hover {
    background-color: rgba(197, 165, 90, 0.15);
}

.result-victory {
    color: var(--color-success);
    font-weight: 700;
}

.result-defeat {
    color: var(--color-error);
    font-weight: 600;
}

/* ── Cartes de choix (classe / race / général) ────────────────── */

.choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.choice-card {
    background-color: var(--color-bg-light);
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.9rem 1rem;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s, transform 0.05s;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    text-align: left;
    font-family: var(--font-base);
    color: var(--color-text);
}

.choice-card:hover {
    border-color: var(--color-accent);
    background-color: var(--color-bg-light);
}

.choice-card:active {
    transform: translateY(1px);
}

.choice-card.selected {
    border-color: var(--color-accent);
    background-color: var(--color-bg-light);
    box-shadow: 0 0 0 3px rgba(139, 26, 26, 0.18);
}

.choice-card .choice-title {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--color-accent);
}

.choice-card .choice-desc {
    font-size: 0.92rem;
    color: var(--color-text);
    line-height: 1.4;
}

.choice-card .choice-bonus {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    border-top: 1px dashed var(--color-border);
    padding-top: 0.4rem;
    margin-top: 0.2rem;
}

.choice-card .choice-bonus ul {
    margin: 0.25rem 0 0;
    padding-left: 1.2rem;
}

.choice-card .choice-bonus li {
    margin-bottom: 0.15rem;
}

/* Pastille de couleur par race (CADRAGE F3, indicatif) */
.race-dot {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    margin-right: 0.4rem;
    vertical-align: middle;
    border: 1px solid var(--color-border);
}

.race-Humains       { background-color: var(--race-Humains); }
.race-Elfes         { background-color: var(--race-Elfes); }
.race-Nains         { background-color: var(--race-Nains); }
.race-Orcs          { background-color: var(--race-Orcs); }
.race-Esclavagistes { background-color: var(--race-Esclavagistes); }
.race-Reptiliens    { background-color: var(--race-Reptiliens); }
.race-Sauvageons    { background-color: var(--race-Sauvageons); }

/* ── Écran de jeu (Bloc 9d) ──────────────────────────────────── */

/*
 * Quand game-mode est actif, main perd son max-width et ses marges pour
 * permettre au layout plein-écran de s'étendre jusqu'aux bords.
 */
.main-content.game-mode {
    max-width: 100%;
    margin: 0;
    padding: 0;
    /* Hauteur = viewport moins la navbar (CSS var définie par game.js) */
    height: calc(100vh - var(--navbar-h, 52px));
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.main-content.game-mode > .page {
    flex: 1;
    overflow: hidden;
}

/* Structure générale de l'écran de jeu : 3 zones empilées verticalement */
.game-screen {
    display: flex;
    flex-direction: column;
    height: 100%;
    animation: none; /* désactive le fade-in global .page pour éviter le saut */
}

/* ── Barre du haut ─────────────────────────────────────────────── */
.game-topbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 1rem;
    background-color: var(--color-bg-secondary);
    border-bottom: 2px solid var(--color-border);
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* Bloc identité : nom de partie | héros | classe | peuple */
.game-topbar-identity {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-right: auto;
    min-width: 0;     /* permet l'ellipsis sur les enfants */
    font-size: 1.05rem;
}

.game-topbar-name {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--color-accent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

.game-topbar-hero {
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
}

.game-topbar-class,
.game-topbar-people {
    color: var(--color-text);
    white-space: nowrap;
}

.game-topbar-sep {
    color: var(--color-accent);
    font-weight: 400;
    opacity: 0.7;
    user-select: none;
}

.game-topbar-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.game-topbar-turn {
    font-weight: 600;
    color: var(--color-text);
}

/* Badge saison : fond coloré selon la saison */
.game-season-badge {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.9rem;
    border: 1px solid var(--color-border);
}

.season-spring { background-color: #D4EDDA; color: #155724; border-color: #C3E6CB; }
.season-summer { background-color: #FFF3CD; color: #856404; border-color: #FFE69C; }
.season-autumn { background-color: #FFE5D0; color: #7B3B00; border-color: #FFCCAA; }
.season-winter { background-color: #D0E8FF; color: #003D80; border-color: #A8CCEE; }

/* Décompte DFT */
.game-dft {
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-text);
    white-space: nowrap;
    min-width: 10ch;
}

.game-dft.dft-urgent {
    color: var(--color-error);
    animation: blink 1s step-end infinite;
}

.game-dft.dft-expired {
    color: var(--color-muted);
}

/* Mode manuel : message RP, pas de décompte */
.game-dft.dft-manual {
    color: var(--color-accent, #b8860b);
    font-style: italic;
    font-weight: normal;
    min-width: auto;
}

@keyframes blink {
    50% { opacity: 0.5; }
}

/* Statut des ordres */
.order-status {
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
}

.order-status-pending  { background-color: #FBDADA; color: var(--color-error); border-color: #F5C6C6; }
.order-status-submitted { background-color: #D4EDDA; color: #155724; border-color: #C3E6CB; }
.order-status-modified  { background-color: #FFF3CD; color: #856404; border-color: #FFE69C; }

/* ── Corps : panneau gauche + zone centrale ────────────────────── */
.game-body {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0; /* nécessaire pour que flex:1 fonctionne dans un parent flex */
}

/* ── Panneau gauche (~250 px, fond secondaire) ─────────────────── */
.game-panel {
    width: 250px;
    flex-shrink: 0;
    background-color: var(--color-bg-secondary);
    border-right: 2px solid var(--color-border);
    overflow-y: auto;
    padding: 0.75rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.panel-section {
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.75rem;
    margin-bottom: 0.25rem;
}

.panel-section:last-child {
    border-bottom: none;
}

.panel-section-title {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
}

/* Liste de ressources (dl/dt/dd) */
.resource-list {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.resource-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
}

.res-label {
    font-size: 0.92rem;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.res-value {
    font-weight: 700;
    font-size: 0.98rem;
    color: var(--color-accent);
    text-align: right;
}

/* Slots d'actions (constructions / attaques / défenses) */
.slot-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.slot-label {
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.slot-dots {
    font-size: 1rem;
    letter-spacing: 0.1em;
    color: var(--color-accent);
}

/* ── Zone centrale : onglets ───────────────────────────────────── */
.game-central {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
    background-color: var(--color-bg);
}

/* Barre d'onglets */
.tab-bar {
    display: flex;
    flex-wrap: wrap;            /* retour à la ligne si trop d'onglets */
    gap: 0;
    border-bottom: 2px solid var(--color-border);
    background-color: var(--color-bg-secondary);
    flex-shrink: 0;
}

.tab-btn {
    padding: 0.55rem 1rem;
    font-family: var(--font-base);
    font-size: 0.95rem;
    font-weight: 600;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    color: var(--color-text-muted);
    white-space: nowrap;
    transition: color 0.15s ease, border-color 0.15s ease;
    margin-bottom: -2px; /* chevauche le border-bottom du parent */
}

.tab-btn:hover {
    color: var(--color-text);
    background-color: rgba(62, 39, 35, 0.05);
}

.tab-btn.active {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
    background-color: var(--color-bg);
}

/* Onglet désactivé (messagerie à venir) */
.tab-btn-coming {
    color: var(--color-muted) !important;
    cursor: default !important;
    font-style: italic;
    opacity: 0.7;
}

.tab-btn-coming:hover {
    background: none !important;
}

/* Zone de contenu des onglets */
.tab-content-area {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    min-height: 0;
}

.tab-panel {
    animation: fade-in 0.15s ease-out;
}

/* ── Barre du bas ───────────────────────────────────────────────── */
.game-bottombar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 1rem;
    background-color: var(--color-bg-secondary);
    border-top: 2px solid var(--color-border);
    flex-shrink: 0;
}

/* Bouton [Confirmer mes ordres] — accent rouge sombre, bien visible */
.btn-confirm-orders {
    background-color: var(--color-accent);
    color: var(--color-bg);
    border: 2px solid var(--color-accent-dark);
    padding: 0.6rem 1.4rem;
    font-size: 1rem;
    font-weight: 700;
    font-family: var(--font-base);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background-color 0.15s, transform 0.05s;
}

.btn-confirm-orders:hover {
    background-color: var(--color-accent-dark);
}

.btn-confirm-orders:active {
    transform: translateY(1px);
}

/* Variante : ordres en attente (pulsation légère) */
.btn-confirm-orders.has-pending {
    animation: pulse-border 1.5s ease-in-out infinite;
}

@keyframes pulse-border {
    0%, 100% { box-shadow: 0 0 0 0 rgba(139, 26, 26, 0.4); }
    50%       { box-shadow: 0 0 0 6px rgba(139, 26, 26, 0); }
}

/* Bouton retour : discret */
.btn-back-family {
    font-size: 0.9rem;
    padding: 0.5rem 0.9rem;
}

/* Bouton "Retour" en haut d'une page (Règles, etc.) — aligné à gauche
   au-dessus du titre de la carte, légèrement décollé du contenu. */
.page-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
}

/* ── Hamburger nav — bouton affiché sur ≤ 768px ──────────────── */
.nav-hamburger {
    display: none;          /* caché sur desktop */
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.35rem 0.6rem;
    cursor: pointer;
    font-size: 1.4rem;
    color: var(--color-accent);
    line-height: 1;
    transition: background-color 0.15s, color 0.15s;
}

.nav-hamburger:hover {
    background-color: var(--color-bg);
    color: var(--color-accent-dark);
}

/* ── Responsive : tablette / mobile (≤ 768px) ─────────────────── */
@media (max-width: 768px) {
    /* Navbar : logo à gauche, hamburger à droite */
    .navbar {
        flex-wrap: nowrap;
        padding: 0.6rem 1rem;
        gap: 0.75rem;
        min-height: 56px;
    }

    .nav-hamburger {
        display: block;
        flex-shrink: 0;
        margin-left: auto;
    }

    /* ── Drawer : panneau latéral qui glisse depuis la droite ───── */
    .nav-drawer {
        display: flex;
        flex-direction: column;
        gap: 0;
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        width: 80%;
        max-width: 320px;
        padding: 3rem 1.25rem 1.5rem;
        background-color: var(--color-bg-secondary);
        border-left: 2px solid var(--color-border);
        box-shadow: -4px 0 16px rgba(0, 0, 0, 0.18);
        transform: translateX(100%);
        transition: transform 280ms ease;
        z-index: 200;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .nav-drawer.nav-drawer-open {
        transform: translateX(0);
    }

    /* Bouton fermeture (X) en haut à droite du drawer */
    .nav-drawer-close {
        display: block;
        position: absolute;
        top: 0.5rem;
        right: 0.75rem;
        background: none;
        border: none;
        font-size: 1.6rem;
        color: var(--color-text);
        cursor: pointer;
        padding: 0.25rem 0.5rem;
        line-height: 1;
    }
    .nav-drawer-close:hover {
        color: var(--color-accent-dark);
    }

    /* Liens : empilés verticalement, plus grands pour le tactile */
    .nav-links {
        display: flex;
        flex-direction: column;
        gap: 0;
        margin-top: 0.5rem;
    }

    .nav-links a {
        padding: 0.85rem 0.5rem;
        min-height: 50px;
        display: flex;
        align-items: center;
        font-size: 1.05rem;
        border-bottom: 1px solid rgba(200, 185, 156, 0.25);
        border-left: none;
        border-right: none;
        border-top: none;
    }

    .nav-links a.active {
        background-color: rgba(184, 134, 11, 0.12);
        border-bottom-color: var(--color-accent-dark);
    }

    /* Actions (pseudo + déconnexion) en bas du drawer */
    .nav-actions {
        margin-left: 0;
        margin-top: auto;
        padding-top: 1rem;
        border-top: 1px solid var(--color-border);
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .nav-actions .nav-username {
        text-align: center;
    }

    .nav-logo { margin-right: 0; }

    /* Bloque le scroll du body quand le drawer est ouvert */
    body.nav-drawer-open {
        overflow: hidden;
    }

    /* Cards : full-width */
    .card {
        padding: 1.25rem;
        margin: 0.75rem auto;
        max-width: 100%;
    }

    .card-wide {
        max-width: 100%;
    }

    .card-title { font-size: 1.45rem; }

    /* Mobile : 1 carte par ligne qui prend toute la largeur disponible
       (override la largeur fixe de 400px) */
    .general-slots {
        grid-template-columns: 1fr;
    }
    .general-slot {
        width: 100%;
        max-width: 400px;
    }

    /* Mobile : portrait centré en haut, infos en dessous */
    .slot-top {
        flex-direction: column;
    }
    .slot-portrait-side {
        width: 100%;
        max-width: none;
        aspect-ratio: auto;
        height: 180px;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
    }
    .choice-grid    { grid-template-columns: 1fr; }
    .family-stats   { gap: 1rem; }

    /* Masque la colonne Prestige dans les archives */
    .archives-table th:nth-child(6),
    .archives-table td:nth-child(6) { display: none; }

    /* Admin */
    .admin-form-grid { grid-template-columns: 1fr; }
    .admin-params-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Responsive : mobile étroit (≤ 600px) ─────────────────────── */
@media (max-width: 600px) {
    /* Panneau gauche passe au-dessus de la zone centrale */
    .game-body {
        flex-direction: column;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .game-panel {
        width: 100%;
        border-right: none;
        border-bottom: 2px solid var(--color-border);
        overflow-y: visible;
    }

    .game-central { overflow: visible; }

    .tab-content-area {
        overflow: visible;
        padding: 1rem;
    }

    /* La main-content en game-mode ne fixe pas la hauteur sur mobile */
    .main-content.game-mode {
        height: auto;
        overflow: visible;
    }

    .main-content.game-mode > .page { overflow: visible; }

    .game-screen {
        height: auto;
        min-height: 100vh;
    }

    /* Bottom bar : sticky en bas du viewport même en scroll */
    .game-bottombar {
        position: sticky;
        bottom: 0;
        z-index: 20;
    }

    .game-topbar-name { max-width: 100%; }

    /* Mobile : identité passe sur 2 lignes — nom de partie en haut,
       héros + classe + peuple en dessous. */
    .game-topbar-identity {
        flex-basis: 100%;
        gap: 0.4rem 0.6rem;
        font-size: 0.95rem;
    }
    .game-topbar-name {
        flex-basis: 100%;          /* nom de partie sur sa propre ligne */
    }
    .game-topbar-name + .game-topbar-sep {
        display: none;             /* masque le | qui suit le nom de partie */
    }

    .btn-confirm-orders {
        font-size: 0.9rem;
        padding: 0.5rem 0.9rem;
    }

    /* Tableau admin + archives : scroll horizontal */
    .admin-table-wrap,
    .archives-table,
    .general-history {
        overflow-x: auto;
        display: block;
    }

    .admin-params-grid { grid-template-columns: 1fr; }
    .admin-actions-bar { flex-direction: column; align-items: stretch; }
}

/* ═══════════════════════════════════════════════════════════════
   BLOC 9e — Contenu des onglets Résumé, Bâtiments, Troupes
   ═══════════════════════════════════════════════════════════════ */

/* ── Titres de section dans les onglets ─────────────────────── */
.tab-section-title {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-accent);
    margin: 0 0 0.75rem 0;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--color-border);
}

.tab-section-title:not(:first-child) {
    margin-top: 1.75rem;
}

/* ── Messages d'état ────────────────────────────────────────── */
.tab-empty,
.tab-loading,
.tab-error {
    font-style: italic;
    color: var(--color-text-muted);
    margin: 0.5rem 0;
}
.tab-error { color: var(--color-error); }

/* ── Wrapper de table responsive (scroll horizontal) ─────────── */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── Tables de jeu ──────────────────────────────────────────── */
.game-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
    margin-bottom: 0.5rem;
}

.game-table th {
    background-color: var(--color-bg-secondary);
    color: var(--color-text-muted);
    font-weight: 600;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.45rem 0.6rem;
    border-bottom: 2px solid var(--color-border);
    white-space: nowrap;
}

.game-table td {
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

.game-table tbody tr:nth-child(even) {
    background-color: rgba(232, 220, 200, 0.35);
}

.game-table tbody tr:hover {
    background-color: rgba(197, 165, 90, 0.18);
}

.game-table .text-right {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Ligne de troupe en déplacement */
.troop-away td { color: var(--color-text-muted); font-style: italic; }
.troop-away-note {
    font-size: 0.88rem;
    color: var(--color-text-muted);
    font-style: italic;
    margin: 0.4rem 0 0 0;
}

/* ── Onglet Résumé : grille ressources ──────────────────────── */
.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.summary-item {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 0.6rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.summary-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
}

.summary-value {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-text);
}

/* ── Onglet Résumé : événements du tour ─────────────────────── */
.turn-results {
    margin-top: 0.25rem;
}

.turn-results-title {
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 0.75rem 0;
}

.turn-results-welcome {
    font-style: italic;
    color: var(--color-text-muted);
    margin-top: 0.75rem;
}

.turn-result-elim {
    color: var(--color-error);
    font-weight: 600;
    margin: 0.5rem 0;
}

.turn-phase {
    border: 1px solid var(--color-border);
    border-radius: 6px;
    margin-bottom: 0.6rem;
    overflow: hidden;
}

.turn-phase-title {
    font-family: var(--font-serif);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-muted);
    background: var(--color-bg-secondary);
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    user-select: none;
    list-style: none;
}

.turn-phase-title::-webkit-details-marker { display: none; }
.turn-phase-title::before { content: "▾ "; }
.turn-phase[open] .turn-phase-title::before { content: "▴ "; }

.turn-event-list {
    margin: 0;
    padding: 0.5rem 0.75rem 0.5rem 1.5rem;
    list-style: disc;
    font-size: 0.9rem;
}

.turn-event-list li { margin-bottom: 0.2rem; }

/* ── Listes d'options (C5) ──────────────────────────────────── */
.option-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.option-item {
    border-radius: 5px;
    border: 1px solid var(--color-border);
    overflow: hidden;
}

.option-btn,
.option-item > .option-name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    width: 100%;
    padding: 0.5rem 0.7rem;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--color-text);
    transition: background-color 0.15s;
}

.option-btn:hover:not(:disabled) {
    background-color: rgba(197, 165, 90, 0.22);
}

.option-btn:disabled,
.option-item.option-locked .option-btn {
    cursor: default;
}

.option-ok    { background-color: var(--color-bg-light); }
.option-ok .option-btn:hover:not(:disabled) { background-color: rgba(74, 124, 89, 0.12); }

.option-insufficient { background-color: rgba(204, 51, 51, 0.05); }
.option-insufficient .option-name,
.option-insufficient .option-cost { color: var(--color-error); }

.option-locked { background-color: var(--color-bg-secondary); opacity: 0.7; }
.option-locked .option-btn { pointer-events: none; }

.option-name { font-weight: 600; flex: 1; }
.option-cost { font-size: 0.85rem; color: var(--color-accent-secondary); white-space: nowrap; }
.option-food { font-size: 0.82rem; color: var(--color-text-muted); white-space: nowrap; }
.option-stats { font-size: 0.78rem; color: var(--color-text-muted); white-space: nowrap; }
.option-reason { font-size: 0.8rem; color: var(--color-error); font-style: italic; flex-basis: 100%; }

/* ── Slots épuisés ──────────────────────────────────────────── */
.slots-exhausted {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    background: rgba(232, 220, 200, 0.6);
    border: 1px solid var(--color-border);
    border-radius: 5px;
    padding: 0.4rem 0.75rem;
    margin-bottom: 0.5rem;
}

/* ── Groupes de troupes par bâtiment ────────────────────────── */
.troop-group {
    margin-bottom: 1.25rem;
}

.troop-group-title {
    font-family: var(--font-serif);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 0.5rem 0;
    padding: 0.3rem 0.5rem;
    background: var(--color-bg-secondary);
    border-radius: 4px;
    border-left: 3px solid var(--color-accent);
}

/* ── Contrôleur de quantité ─────────────────────────────────── */
.qty-ctrl {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.6rem;
    flex-wrap: wrap;
}

.qty-btn {
    width: 1.8rem;
    height: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    color: var(--color-text);
    padding: 0;
}

.qty-btn:hover:not(:disabled) {
    background-color: rgba(197, 165, 90, 0.25);
}

.qty-btn:disabled { opacity: 0.4; cursor: default; }

.qty-input {
    width: 3.5rem;
    text-align: center;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 0.25rem 0.3rem;
    font-size: 0.9rem;
    background: var(--color-bg);
    color: var(--color-text);
}

.qty-input:disabled { opacity: 0.5; }

/* ── Stat avec bonus de tech (tooltip au survol) — S2 ───────── */
.stat-with-bonus {
    color: var(--color-accent, #c5a55a);
    font-weight: 700;
    border-bottom: 1px dotted currentColor;
    cursor: help;
}

/* ── Layout recrutement compact par bâtiment — S3 ───────────── */
.troop-recruit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.5rem;
    margin: 0.5rem 0;
}

.troop-recruit-cell {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-bg);
}

.troop-recruit-cell-locked {
    opacity: 0.55;
    background: var(--color-bg-secondary);
}

.troop-recruit-cell-insufficient {
    border-color: rgba(192, 80, 80, 0.6);
    background: rgba(192, 80, 80, 0.06);
}

.troop-recruit-cell-ok {
    border-color: var(--color-accent, #c5a55a);
}

.troop-recruit-name {
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--color-text);
}

.troop-recruit-cost {
    font-size: 0.78rem;
    color: var(--color-text-muted, #777);
}

.troop-recruit-qty {
    width: 100%;
    text-align: center;
    font-size: 0.9rem;
    padding: 0.3rem 0.3rem;
    min-height: 1.85rem;
}

.troop-recruit-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.4rem;
}

.troop-recruit-submit {
    min-width: 8rem;
}

/* Responsive : 2 colonnes sous 600px, 1 colonne sous 400px */
@media (max-width: 600px) {
    .troop-recruit-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 400px) {
    .troop-recruit-grid {
        grid-template-columns: 1fr;
    }
    .troop-recruit-qty {
        min-height: 2.2rem;  /* zone tactile confortable */
    }
}

/* ── Petits boutons d'action ────────────────────────────────── */
.btn-sm {
    font-size: 0.82rem;
    padding: 0.25rem 0.6rem;
    min-height: auto;
}

/* ── Listes Découvertes / Recherche ─────────────────────────── */
.discovery-list,
.research-list {
    margin: 0;
    padding-left: 1.2rem;
    font-size: 0.93rem;
}

.discovery-list li,
.research-list li {
    margin-bottom: 0.4rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px dashed var(--color-border);
}

.discovery-list li:last-child,
.research-list li:last-child {
    border-bottom: none;
}

/* ── Feedback inline ────────────────────────────────────────── */
.game-feedback {
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    border-top: 1px solid var(--color-border);
    text-align: center;
    transition: opacity 0.3s;
}

.game-feedback-success {
    background-color: rgba(74, 124, 89, 0.12);
    color: var(--color-success);
}

.game-feedback-error {
    background-color: rgba(204, 51, 51, 0.08);
    color: var(--color-error);
}

/* ── Onglet Rapports (étape 3B) ────────────────────────────── */
.tab-badge {
    display: inline-block;
    margin-left: 0.4rem;
    background: var(--color-error, #b00020);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 0.05rem 0.45rem;
    line-height: 1.4;
    vertical-align: middle;
}

.reports-main {
    padding: 0.5rem 0 1rem 0;
}
.reports-main-title {
    margin: 0 0 0.8rem 0;
    font-size: 1.2rem;
}
.reports-barde-recap {
    margin: 0 0 0.8rem 0;
    padding: 0.7rem 1rem;
    background: linear-gradient(135deg, #f6e8b5 0%, #e9d384 100%);
    border: 1px solid #b88a2c;
    border-radius: 6px;
    color: #5a3d10;
    font-size: 0.95rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.reports-barde-recap strong {
    color: #4a2f08;
}
.reports-barde-detail {
    color: #7a5419;
    font-size: 0.85rem;
    margin-left: 0.4rem;
}
.reports-section-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.reports-section-btn {
    width: 100%;
    text-align: left;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.7rem 0.9rem;
    font-family: inherit;
    font-size: 1rem;
    cursor: pointer;
    display: grid;
    grid-template-columns: 2rem 1fr auto auto;
    align-items: center;
    gap: 0.6rem;
    color: inherit;
}
.reports-section-btn:hover {
    background: var(--color-bg-primary, #fff8eb);
}
.reports-section-icon { font-size: 1.2rem; }
.reports-section-count { color: var(--color-text-muted, #666); }
.reports-section-chev { font-size: 1.3rem; color: var(--color-text-muted, #888); }

.reports-history-bar {
    margin-top: 1rem;
    text-align: center;
}

/* Modale plein écran */
.reports-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1000;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 1rem;
    overflow-y: auto;
}
.reports-modal.is-open { display: flex; }
body.reports-modal-open { overflow: hidden; }
.reports-modal-content {
    background: var(--color-bg-primary, #fff8eb);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    width: 100%;
    max-width: 900px;
    margin: 1rem auto;
    box-shadow: 0 8px 30px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
}
.reports-modal-header {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    background: inherit;
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
}
.reports-modal-back {
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.3rem 0.6rem;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
}
.reports-modal-back:hover { background: var(--color-bg-secondary); }
.reports-modal-title {
    margin: 0;
    font-size: 1.1rem;
}
.reports-modal-body {
    padding: 1rem 1.1rem 1.3rem 1.1rem;
}
@media (max-width: 700px) {
    .reports-modal-content { margin: 0; max-width: 100%; }
}

/* Cartes de combat */
.combat-card {
    border: 1px solid var(--color-border);
    background: var(--color-bg-secondary);
    border-radius: var(--radius);
    padding: 0.8rem 1rem;
    margin-bottom: 1rem;
}
.combat-card-header h3 { margin: 0; font-size: 1.05rem; }
.combat-camps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 0.6rem 0;
}
.combat-camp h4 { margin: 0 0 0.25rem 0; font-size: 0.95rem; }
.combat-player-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.9rem;
}
.combat-section {
    margin-top: 0.7rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--color-border);
}
.combat-section h4 {
    margin: 0 0 0.35rem 0;
    font-size: 0.95rem;
}
.combat-before-after {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.combat-grabuge-bar {
    margin-top: 0.7rem;
    padding: 0.5rem 0.7rem;
    background: var(--color-error-bg, #f8e1e1);
    border: 1px solid var(--color-error, #b00020);
    border-radius: var(--radius);
    color: var(--color-error, #b00020);
    font-weight: 600;
}
.combat-victors {
    margin-top: 0.7rem;
    padding: 0.45rem 0.7rem;
    border-radius: var(--radius);
    font-weight: 700;
    text-align: center;
}
.combat-victors-atk { background: #fde2c0; color: #6e3a00; }
.combat-victors-def { background: #d1e3f5; color: #08406b; }

.report-units-list {
    list-style: disc inside;
    margin: 0;
    padding: 0;
    font-size: 0.9rem;
}

/* Tables génériques (Missions, Interceptions, Explorations) */
.report-table-section { margin-bottom: 1rem; }
.report-table-section h3 { margin: 0 0 0.5rem 0; font-size: 1rem; }
.report-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    font-size: 0.92rem;
}
.report-table th, .report-table td {
    padding: 0.45rem 0.6rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}
.report-table tr:last-child td { border-bottom: none; }
.report-table th { background: var(--color-bg-primary, #fff8eb); }

/* Espionnage : carte snapshot */
.espionnage-card {
    border: 1px solid var(--color-border);
    background: var(--color-bg-secondary);
    border-radius: var(--radius);
    padding: 0.75rem 0.9rem;
    margin-bottom: 0.8rem;
}
.espionnage-card-header h3 { margin: 0 0 0.4rem 0; font-size: 1.02rem; }
.espionnage-resources {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-bottom: 0.4rem;
}
.espionnage-units strong { display: inline-block; margin-bottom: 0.2rem; }

/* Liens cliquables dans les rapports */
.report-link {
    color: var(--color-accent, #8B1A1A);
    text-decoration: none;
    font-weight: 500;
}
.report-link:hover { text-decoration: underline; }

/* Filtres modale d'historique */
.reports-history-filters {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-bottom: 0.8rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px dashed var(--color-border);
}
.reports-history-filters select {
    padding: 0.3rem;
    font-family: inherit;
    margin-left: 0.3rem;
}
.reports-history-section-title {
    margin: 1rem 0 0.4rem 0;
    font-size: 1rem;
    color: var(--color-text-muted, #555);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.2rem;
}

/* Phrases narratives Agora (étape 3B) */
.agora-narrative-list {
    list-style: none;
    margin: 0.6rem 0 0.8rem 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.agora-line-danger {
    color: var(--color-error, #b00020);
    font-weight: 500;
}
.agora-line-normal {
    color: inherit;
}

/* ── Découvertes : tableau récapitulatif (étape 3D) ────────── */
.discoveries-table-section {
    margin: 1rem 0;
}

.discoveries-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.94rem;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
}

.discoveries-table th,
.discoveries-table td {
    padding: 0.5rem 0.7rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

.discoveries-table th {
    background: var(--color-bg-primary, #fff8eb);
    font-weight: 700;
}

.discoveries-table tr:last-child td {
    border-bottom: none;
}

.discovery-table-link {
    color: var(--color-accent, #8B1A1A);
    text-decoration: none;
    font-weight: 500;
}
.discovery-table-link:hover {
    text-decoration: underline;
}

/* S4 (2026-05-10) — Cellules bannière dans le tableau Découvertes :
   bannière compacte cliquable (renvoie vers la page Maison/Clan). */
.discoveries-table .discovery-banner-cell {
    width: 1%;            /* Cellule "shrink-to-fit" : la bannière fait sa taille */
    white-space: nowrap;
    padding: 0.3rem 0.5rem;
}
.discovery-banner-link {
    display: inline-block;
    line-height: 0;       /* évite l'espace fantôme du <a> autour du bloc */
    border-radius: 3px;
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.discovery-banner-link:hover {
    transform: scale(1.06);
    box-shadow: 0 0 0 2px var(--color-accent, #8B1A1A) inset;
}
.discovery-banner-link .banner.banner-sm {
    width: 36px;
    height: 28px;
}

/* ── Espionnage : récap contre-espions (étape 3D) ──────────── */
.counter-spy-section {
    margin-top: 1rem;
    padding: 0.6rem 0.8rem;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}
.counter-spy-list {
    list-style: none;
    margin: 0.3rem 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.counter-spy-item {
    padding: 0.2rem 0.55rem;
    background: var(--color-bg-primary, #fff8eb);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 0.9rem;
}
.counter-spy-note {
    margin: 0.4rem 0 0 0;
    font-size: 0.85rem;
    font-style: italic;
}

/* ── Engagements (étape 3C) ────────────────────────────────── */
.engagements-section {
    margin-bottom: 1.5rem;
    padding: 0.8rem 0.9rem;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.engagements-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 0.4rem 0 0.8rem 0;
}

.engagements-subtitle {
    margin: 0.7rem 0 0.35rem 0;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-text-muted, #555);
}

.engagements-empty {
    margin: 0 0 0.4rem 0;
    font-size: 0.88rem;
    font-style: italic;
    color: var(--color-text-muted, #777);
}

.engagement-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.engagement-item {
    padding: 0.5rem 0.7rem;
    background: var(--color-bg-primary, #fff8eb);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.engagement-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.engagement-icon {
    font-size: 1.1rem;
}

.engagement-target {
    flex: 1;
    font-size: 0.95rem;
}

.engagement-units {
    font-size: 0.88rem;
    color: var(--color-text-muted, #555);
    padding-left: 1.6rem;
}

.engagement-form-container {
    margin: 0.7rem 0;
    padding: 0.7rem;
    background: var(--color-bg-primary, #fff8eb);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
}

.engagement-form-title {
    margin: 0 0 0.6rem 0;
    font-size: 1rem;
}

.engagement-form-label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.6rem;
    font-size: 0.92rem;
}

.engagement-form-label select {
    padding: 0.35rem;
    font-family: inherit;
}

.engagement-units-fieldset {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.5rem 0.7rem;
    margin: 0.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.engagement-units-fieldset legend {
    padding: 0 0.3rem;
    font-size: 0.88rem;
    color: var(--color-text-muted, #666);
}

.engagement-unit-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.engagement-unit-input {
    width: 4rem;
    padding: 0.25rem 0.4rem;
    text-align: right;
    font-family: inherit;
}

.engagement-form-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 0.5rem;
}

/* ── Onglet Ordres ──────────────────────────────────────────── */
.order-recap-list {
    list-style: none;
    margin: 0 0 1rem 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.order-recap-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 0.93rem;
}

.order-recap-desc {
    flex: 1;
}

.order-del-btn {
    flex-shrink: 0;
    background: none;
    border: 1px solid var(--color-error);
    color: var(--color-error);
    border-radius: var(--radius);
    padding: 0.15rem 0.5rem;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.15s;
}

.order-del-btn:hover {
    background: var(--color-error);
    color: #fff;
}

.orders-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
    margin-top: 0.5rem;
}

.orders-status-label {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    font-style: italic;
}

/* ── Onglet Découvertes ─────────────────────────────────────── */
.explore-bar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.spy-select {
    flex: 1;
    min-width: 160px;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
    font-family: var(--font-base);
    font-size: 0.92rem;
    color: var(--color-text);
}

.discovery-card {
    border: 1px solid var(--color-border);
    border-radius: 6px;
    margin-bottom: 0.75rem;
    background: var(--color-bg-secondary);
    overflow: hidden;
}

.discovery-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
}

.discovery-name {
    font-weight: bold;
    font-size: 1rem;
}

.discovery-race {
    font-size: 0.82rem;
    font-weight: bold;
    padding: 0.15rem 0.45rem;
    border-radius: 3px;
    color: #fff;
    background: var(--color-text-muted);
}

.discovery-turn {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    font-style: italic;
}

.discovery-actions {
    display: flex;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    flex-wrap: wrap;
}

/* Boutons d'action avec couleurs thématiques */
.discovery-actions button {
    padding: 0.3rem 0.65rem;
    border: none;
    border-radius: var(--radius);
    font-family: var(--font-base);
    font-size: 0.85rem;
    cursor: pointer;
    color: #fff;
    transition: filter 0.15s;
}

.discovery-actions button:hover { filter: brightness(0.88); }

.btn-action-attack  { background: #8B1A1A; }
.btn-action-defend  { background: #1565C0; }
.btn-action-spy     { background: #6A1B9A; }
.btn-action-gold    { background: #9A6F00; }
.btn-action-indicate { background: #4A7C59; }

.discovery-subform {
    padding: 0.6rem 0.75rem 0.75rem;
    border-top: 1px dashed var(--color-border);
    background: var(--color-bg);
}

.subform-section {
    margin-bottom: 0.6rem;
}

.subform-title {
    font-size: 0.85rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    margin-bottom: 0.4rem;
}

.subform-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.4rem;
}

.subform-select {
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
    font-family: var(--font-base);
    font-size: 0.9rem;
    color: var(--color-text);
    flex: 1;
    min-width: 120px;
}

.subform-submit {
    padding: 0.3rem 0.8rem;
    background: var(--color-accent);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-family: var(--font-base);
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.15s;
}

.subform-submit:hover { background: var(--color-accent-dark); }

/* Vote de paix */
.peace-vote-box {
    border: 2px solid var(--color-gold);
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    background: rgba(197, 165, 90, 0.1);
}

.peace-vote-box h3 {
    margin: 0 0 0.4rem 0;
    color: var(--color-gold);
    font-size: 1rem;
}

.peace-vote-box p {
    margin: 0 0 0.6rem 0;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.peace-vote-actions {
    display: flex;
    gap: 0.6rem;
}

.peace-vote-actions button {
    padding: 0.35rem 0.9rem;
    border: none;
    border-radius: var(--radius);
    font-family: var(--font-base);
    font-size: 0.9rem;
    cursor: pointer;
    color: #fff;
    transition: filter 0.15s;
}

.peace-vote-actions button:first-child  { background: var(--color-success); }
.peace-vote-actions button:last-child   { background: var(--color-error); }
.peace-vote-actions button:hover        { filter: brightness(0.88); }

/* ── Onglet Recherche ───────────────────────────────────────── */
.research-completed-list {
    list-style: none;
    margin: 0 0 0.5rem 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.research-completed-list li {
    padding: 0.3rem 0.5rem;
    font-size: 0.91rem;
    color: var(--color-text-muted);
    background: rgba(74, 124, 89, 0.08);
    border-left: 3px solid var(--color-success);
    border-radius: 0 var(--radius) var(--radius) 0;
}

.research-queue-list {
    list-style: none;
    margin: 0 0 0.5rem 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    counter-reset: queue-counter;
}

.research-queue-item {
    counter-increment: queue-counter;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-bg-secondary);
}

.rq-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.35rem;
}

.rq-desc {
    font-size: 0.92rem;
}

.rq-desc::before {
    content: counter(queue-counter) ". ";
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.rq-controls {
    display: flex;
    gap: 0.3rem;
}

.rq-move, .rq-remove {
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.1rem 0.45rem;
    font-size: 0.82rem;
    cursor: pointer;
    color: var(--color-text);
    transition: background 0.12s;
    line-height: 1.4;
}

.rq-move:hover   { background: var(--color-bg-secondary); }
.rq-remove       { border-color: var(--color-error); color: var(--color-error); }
.rq-remove:hover { background: var(--color-error); color: #fff; }

.rq-progress-wrap {
    height: 6px;
    background: var(--color-border);
    border-radius: 3px;
    overflow: hidden;
}

.rq-progress-bar {
    height: 100%;
    background: var(--color-success);
    border-radius: 3px;
    transition: width 0.3s;
}

.rq-progress-label {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin-top: 0.2rem;
}

/* ── Admin — Panel (Bloc 9g) ────────────────────────────────── */
.admin-wrapper {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 1.5rem 1rem;
}

.admin-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.admin-page-title {
    font-size: 1.5rem;
    margin: 0;
    color: var(--color-text);
}

/* Onglets de section admin (Parties / Galeries) */
.admin-section-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 1.25rem;
    border-bottom: 2px solid var(--color-border);
}
.admin-section-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    padding: 0.6rem 1.1rem;
    font-family: var(--font-base);
    font-size: 1rem;
    color: var(--color-text-muted);
    cursor: pointer;
}
.admin-section-tab:hover { color: var(--color-accent); }
.admin-section-tab.active {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
    font-weight: 600;
}

/* Section galerie admin */
.admin-gallery-section {
    margin-bottom: 2.5rem;
    padding: 1rem 1.25rem;
    background-color: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
}
.admin-gallery-upload {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin: 0.75rem 0 1rem;
}
.admin-gallery-file {
    font-family: var(--font-base);
}
.admin-gallery-race-select {
    font-family: var(--font-base);
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background-color: var(--color-bg-light);
    color: var(--color-text);
}
.admin-gallery-race-group {
    margin-bottom: 1.5rem;
}
.admin-gallery-race-title {
    font-size: 1.05rem;
    color: var(--color-accent);
    margin: 0 0 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px dashed var(--color-border);
}
.admin-gallery-race-count {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}
.admin-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 140px);
    gap: 0.75rem;
}
.admin-gallery-item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background-color: var(--color-bg-secondary);
    padding: 0.35rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    width: 140px;
}
.admin-gallery-item img {
    width: 128px;
    height: 128px;
    object-fit: cover;
    border-radius: var(--radius);
    background-color: var(--color-bg-light);
}
.admin-gallery-item-name {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    max-width: 128px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.admin-gallery-delete {
    color: var(--color-error);
    border-color: var(--color-error);
}

.admin-section-title {
    font-size: 1.05rem;
    font-weight: bold;
    margin: 0 0 0.75rem 0;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
}

/* ── Création de partie ─────── */
.admin-create-form {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}

.admin-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.85rem;
    margin-bottom: 0.85rem;
}

.admin-form-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.admin-form-field label {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.admin-form-field input {
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
    font-family: var(--font-base);
    font-size: 0.93rem;
    color: var(--color-text);
}

.admin-form-actions {
    display: flex;
    gap: 0.6rem;
    align-items: center;
}

/* ── Filtre par statut ──────── */
.admin-filter-bar {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.admin-filter-btn {
    padding: 0.25rem 0.65rem;
    border: 1px solid var(--color-border);
    border-radius: 3px;
    background: var(--color-bg);
    font-family: var(--font-base);
    font-size: 0.83rem;
    cursor: pointer;
    color: var(--color-text-muted);
    transition: background 0.12s, color 0.12s;
}

.admin-filter-btn.active,
.admin-filter-btn:hover {
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
}

/* ── Tableau de parties ─────── */
.admin-table-wrap {
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.admin-table th {
    text-align: left;
    padding: 0.5rem 0.6rem;
    border-bottom: 2px solid var(--color-border);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.admin-table td {
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid rgba(200, 185, 156, 0.4);
    vertical-align: middle;
}

.admin-table tbody tr:nth-child(even) {
    background-color: rgba(232, 220, 200, 0.3);
}

.admin-table-row {
    cursor: pointer;
    transition: background 0.12s;
}

.admin-table-row:hover {
    background-color: rgba(197, 165, 90, 0.12) !important;
}

.admin-game-name {
    font-weight: bold;
}

/* ── Badges de statut ───────── */
.admin-status-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    font-size: 0.8rem;
    font-weight: bold;
    white-space: nowrap;
}

.status-open        { background: #D4EDDA; color: #155724; }
.status-triggered   { background: #FFF3CD; color: #856404; }
.status-inprogress  { background: #CCE5FF; color: #004085; }
.status-finished    { background: #E2E3E5; color: #383D41; }
.status-abandoned   { background: #FBDADA; color: var(--color-error); }
.status-unknown     { background: var(--color-bg-secondary); color: var(--color-text-muted); }

/* ── Badge MODE MANUEL ───────── */
.admin-badge-manual {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.1rem 0.45rem;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: bold;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: #f5e1a4;
    color: #5a3a00;
    border: 1px solid #c9a14a;
    vertical-align: middle;
}

/* Ligne prioritaire (manual + in_progress) */
.admin-table-row.row-manual {
    background-color: rgba(197, 165, 90, 0.08);
}
.admin-table-row.row-manual:hover {
    background-color: rgba(197, 165, 90, 0.20) !important;
}

/* Radio fieldset — création de partie */
.admin-form-fieldset {
    margin: 0.75rem 0;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-bg);
}
.admin-form-fieldset legend {
    padding: 0 0.4rem;
    font-size: 0.85rem;
    font-weight: bold;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.admin-form-radio {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.3rem 0;
    cursor: pointer;
}
.admin-form-radio .hint {
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

/* ── Portraits des joueurs (modération admin) ───────────────────── */
.admin-filter-label {
    display: inline-flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-right: 1rem;
}
.admin-filter-count {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    margin-left: auto;
}
.pportrait-item {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.pportrait-item img {
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--color-border);
}
.pportrait-meta {
    font-size: 0.82rem;
    line-height: 1.35;
}
.pportrait-name {
    font-weight: bold;
    font-size: 0.95rem;
}
.pportrait-sub {
    color: var(--color-text-muted);
}
.pportrait-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.4rem;
    margin-top: 0.2rem;
}
.pportrait-race-label {
    display: flex;
    flex-direction: column;
    font-size: 0.7rem;
    color: var(--color-text-muted);
    gap: 0.15rem;
}
.pportrait-race-select {
    font-size: 0.85rem;
    padding: 0.15rem 0.3rem;
}

/* ── Détail d'une partie ────── */
.admin-detail-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.admin-detail-card {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.admin-params-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.5rem;
    margin: 0;
}

.admin-params-grid > div {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.admin-params-grid dt {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}

.admin-params-grid dd {
    font-size: 0.95rem;
    font-weight: bold;
    margin: 0;
}

/* ── Statut des joueurs ─────── */
.admin-player-status {
    font-size: 0.82rem;
    font-weight: bold;
}
.admin-player-active      { color: var(--color-success); }
.admin-player-eliminated  { color: var(--color-error); }
.admin-player-surrendered { color: var(--color-text-muted); }
.admin-player-withdrawn   { color: var(--color-text-muted); }

/* ── Actions admin ──────────── */
.admin-actions-bar {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
}

/* Boutons supplémentaires pour l'admin */
.btn-warning {
    background: #E65C00;
    color: #fff;
    border: none;
    border-radius: var(--radius);
    padding: 0.4rem 0.9rem;
    font-family: var(--font-base);
    font-size: 0.9rem;
    cursor: pointer;
    transition: filter 0.15s;
}
.btn-warning:hover { filter: brightness(0.88); }

.btn-danger {
    background: var(--color-error);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    padding: 0.4rem 0.9rem;
    font-family: var(--font-base);
    font-size: 0.9rem;
    cursor: pointer;
    transition: filter 0.15s;
}
.btn-danger:hover  { filter: brightness(0.88); }

.btn-sm  { padding: 0.25rem 0.6rem; font-size: 0.87rem; }
.btn-xs  { padding: 0.15rem 0.45rem; font-size: 0.8rem; }

/* ── Feedback admin ─────────── */
.admin-feedback {
    margin-top: 0.6rem;
    font-size: 0.9rem;
    min-height: 1.2em;
}

.admin-feedback-success { color: var(--color-success); }
.admin-feedback-error   { color: var(--color-error); }

/* ── Utilitaires ────────────────────────────────────────────── */
.text-muted { color: var(--color-text-muted); }
.text-right { text-align: right; }
.text-error { color: var(--color-error); }
.stat-damage    { color: var(--color-error); }
.stat-resistance { color: var(--color-success); }
.resource-gain  { color: var(--color-text-muted); font-size: 0.88em; }
.res-group-title { font-weight: 700; text-decoration: underline; color: var(--color-text); font-size: 0.95rem; }
.res-group-value { font-weight: 700; font-size: 0.95rem; color: var(--color-text); text-align: right; }
.resource-row-sub { padding-left: 0.6rem; }
.res-label-sub { font-size: 0.88rem; color: var(--color-text-muted); }
.res-value-sub { font-weight: 600; font-size: 0.9rem; color: var(--color-text); text-align: right; }

/* ── Onglet Commerce ────────────────────────────────────────── */
.commerce-rules { font-size: 0.93rem; margin: 0.25rem 0; }
.commerce-avail { font-size: 0.93rem; margin: 0.15rem 0 0.75rem; }

.commerce-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0.75rem 0;
}

.commerce-slot {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.commerce-slot-label {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    min-width: 3.5rem;
    flex-shrink: 0;
}

.commerce-slot .commerce-qty {
    width: 4rem;
    flex-shrink: 0;
}

.commerce-slot .commerce-dest {
    flex: 1;
    min-width: 140px;
}

.commerce-validation {
    font-size: 0.88rem;
    margin-top: 0.4rem;
    min-height: 1.2em;
}

.commerce-actions {
    display: flex;
    gap: 0.6rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

/* Responsive : tables de jeu sur mobile */
@media (max-width: 600px) {
    .game-table th:nth-child(n+4),
    .game-table td:nth-child(n+4) {
        display: none;  /* masque les colonnes de stats sur petits écrans */
    }

    .summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .option-btn { flex-wrap: wrap; }
    .option-stats { display: none; }

    .qty-ctrl { flex-wrap: wrap; gap: 0.4rem; }
}

/* ═════════════════════════════════════════════════════════════════
   ── L'Archipel — Page de statistiques globales ─────────────────
   ═════════════════════════════════════════════════════════════════ */

.archipel-updated {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    font-style: italic;
    margin: 0 0 1.25rem;
}

.archipel-section {
    margin: 0 0 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
}
.archipel-section:last-child {
    border-bottom: none;
}
.archipel-section-title {
    font-family: var(--font-title, inherit);
    font-size: 1.4rem;
    margin: 0 0 0.9rem;
    color: var(--color-text);
}

/* ── Cartes vue d'ensemble ───────────────────────────────────────── */
.archipel-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.9rem;
}
.archipel-card {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 1rem 0.75rem;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07);
}
.archipel-card-icon {
    font-size: 2rem;
    line-height: 1;
    margin-bottom: 0.4rem;
}
.archipel-card-value {
    font-size: 2.25rem;
    font-weight: bold;
    color: var(--color-accent, #8b6914);
    line-height: 1;
    margin-bottom: 0.3rem;
}
.archipel-card-label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
}
.archipel-card-decouvertes { border-left: 3px solid #1E3A8A; }
.archipel-card-conquises   { border-left: 3px solid #B45309; }
.archipel-card-insoumises  { border-left: 3px solid #6B21A8; }
.archipel-card-encours     { border-left: 3px solid #166534; }

/* ── Tableaux ────────────────────────────────────────────────────── */
.archipel-table-wrap {
    overflow-x: auto;
}
.archipel-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.archipel-table th,
.archipel-table td {
    padding: 0.5rem 0.7rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}
.archipel-table th {
    background: var(--color-bg-secondary);
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}
.archipel-table tbody tr:hover {
    background-color: rgba(197, 165, 90, 0.08);
}
.archipel-rank {
    font-weight: bold;
    color: var(--color-accent, #8b6914);
    width: 3rem;
    text-align: center;
}
.archipel-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.archipel-link {
    color: var(--color-accent, #8b6914);
    text-decoration: none;
}
.archipel-link:hover {
    text-decoration: underline;
}
.archipel-status-badge {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    font-size: 0.75rem;
    font-weight: bold;
}
.archipel-status-badge.status-active   { background: #D4EDDA; color: #155724; }
.archipel-status-badge.status-revoked  { background: #FBDADA; color: #721C24; }


/* ═════════════════════════════════════════════════════════════════
   ── Page Règles : sommaire latéral + contenu Markdown ──────────
   ═════════════════════════════════════════════════════════════════ */

.page-rules {
    /* Surcharge le padding standard des pages pour donner toute la
       largeur au layout 2 colonnes. */
    padding: 0;
    max-width: 100%;
}

.rules-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem;
}

/* ── Sommaire latéral ────────────────────────────────────────────── */
.rules-toc {
    position: sticky;
    /* Démarre juste en dessous de la navbar sticky (60px de haut) */
    top: 70px;
    align-self: start;
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    padding: 0.9rem 1rem 1rem;
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.rules-toc-title {
    font-family: var(--font-title, inherit);
    font-size: 1rem;
    margin: 0.5rem 0 0.6rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.4rem;
}
.rules-toc-nav {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    font-size: 0.95rem;
}
.rules-toc-link {
    display: block;
    padding: 0.45rem 0.6rem;
    color: var(--color-text);
    text-decoration: none;
    border-left: 3px solid transparent;
    border-radius: 0 4px 4px 0;
    transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}
.rules-toc-link:hover {
    background-color: rgba(184, 134, 11, 0.08);
    color: var(--color-accent-dark);
}
.rules-toc-link.active {
    background-color: rgba(184, 134, 11, 0.15);
    color: var(--color-accent-dark);
    border-left-color: var(--color-accent-dark);
    font-weight: 600;
}
.rules-toc-group-title {
    margin-top: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}
.rules-toc-peuples-list {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin-left: 0.4rem;
    margin-top: 0.2rem;
    border-left: 2px solid var(--color-border);
    padding-left: 0.5rem;
}
.rules-toc-peuple {
    font-size: 0.9rem;
}
.rules-toc-peuple-dot {
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    margin-right: 0.45rem;
    border: 1px solid rgba(0, 0, 0, 0.18);
    vertical-align: middle;
}
.rules-toc-link.rules-toc-peuple.active {
    border-left-color: var(--peuple-color, var(--color-accent-dark));
}

/* Bouton Retour réutilise .page-back-btn (déjà stylé) */
.rules-toc .page-back-btn {
    margin-bottom: 0.75rem;
}

/* Burger mobile et bouton X du drawer : cachés sur desktop */
.rules-toc-burger,
.rules-toc-close {
    display: none;
}

/* Overlay drawer mobile */
.rules-toc-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 199;
    opacity: 0;
    transition: opacity 250ms ease;
}
.rules-toc-overlay.rules-toc-overlay-visible {
    display: block;
    opacity: 1;
}

body.rules-toc-locked {
    overflow: hidden;
}

/* ── Zone de contenu (Markdown rendu) ────────────────────────────── */
.rules-content {
    min-width: 0;  /* permet au contenu long d'utiliser l'overflow correctement */
}

/* Bandeau de peuple : couleur d'accent du peuple */
.rules-peuple-banner {
    border-radius: 6px 6px 0 0;
    padding: 1.5rem 1.25rem 1.25rem;
    margin: 0 0 1.25rem;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
.rules-peuple-banner .rules-peuple-back {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #fff;
    border-radius: 4px;
    padding: 0.3rem 0.7rem;
    font-size: 0.85rem;
    cursor: pointer;
    margin-bottom: 0.75rem;
}
.rules-peuple-banner .rules-peuple-back:hover {
    background: rgba(255, 255, 255, 0.28);
}
.rules-peuple-title {
    font-family: var(--font-title, inherit);
    font-size: 2.1rem;
    margin: 0;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ── Markdown rendu : style « parchemin » ─────────────────────── */
.rules-md {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 1.5rem 1.75rem;
    line-height: 1.65;
    color: var(--color-text);
    font-size: 1rem;
}
.rules-md h1,
.rules-md h2,
.rules-md h3 {
    font-family: var(--font-title, inherit);
    color: var(--color-accent-dark);
    margin-top: 1.5rem;
    margin-bottom: 0.6rem;
    line-height: 1.2;
}
.rules-md h1 {
    font-size: 1.85rem;
    border-bottom: 2px solid var(--color-accent-dark);
    padding-bottom: 0.3rem;
    margin-top: 0;
}
.rules-md h2 {
    font-size: 1.4rem;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.2rem;
}
.rules-md h3 {
    font-size: 1.15rem;
    color: var(--color-accent);
}
.rules-md p {
    margin: 0 0 0.9rem;
}
.rules-md ul,
.rules-md ol {
    margin: 0 0 0.9rem 1.25rem;
    padding: 0;
}
.rules-md li {
    margin: 0.25rem 0;
}
.rules-md a {
    color: var(--color-accent-dark);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
.rules-md a:hover {
    border-bottom-color: var(--color-accent-dark);
}
.rules-md strong {
    color: var(--color-accent-dark);
}
.rules-md em {
    color: var(--color-text-muted);
}
.rules-md blockquote {
    margin: 1rem 0;
    padding: 0.5rem 1rem;
    border-left: 4px solid var(--color-accent);
    background-color: rgba(184, 134, 11, 0.06);
    color: var(--color-text);
    font-style: italic;
}
.rules-md code {
    background-color: rgba(0, 0, 0, 0.05);
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    font-size: 0.9em;
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
.rules-md pre {
    background-color: rgba(0, 0, 0, 0.05);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 0.75rem 1rem;
    overflow-x: auto;
    margin: 0.9rem 0;
}
.rules-md pre code {
    background: none;
    padding: 0;
}
.rules-md hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 1.25rem 0;
}

/* ── Page peuple : amplification de la couleur du peuple ──────── */
/* Le conteneur racine porte deux variables CSS valorisées par le JS depuis
   couleur_pastille (REF_PEUPLE.txt) :
     --peuple-color       : couleur principale (ex. #4a3f9c pour Humains)
     --peuple-color-light : version transparente (alpha 1f ≈ 12 %) pour les
                            fonds doux des citations.
   Tous les styles ci-dessous référencent ces variables — modifier la
   couleur dans le REF + restart app suffit pour repeindre la page. */
.regles-peuple { --peuple-color: var(--color-accent); --peuple-color-light: rgba(0,0,0,0.05); }

/* Liseré coloré sur les titres internes (h2/h3) du markdown */
.regles-peuple .rules-md h2,
.regles-peuple .rules-md h3 {
    border-left: 4px solid var(--peuple-color);
    padding-left: 12px;
    border-bottom: none;
    color: var(--peuple-color);
}

/* Citations : bordure + fond légèrement teinté */
.regles-peuple .rules-md blockquote {
    border-left: 4px solid var(--peuple-color);
    background-color: var(--peuple-color-light);
}

/* Liens internes au contenu de la page peuple en couleur du peuple */
.regles-peuple .rules-md a {
    color: var(--peuple-color);
}
.regles-peuple .rules-md a:hover {
    border-bottom-color: var(--peuple-color);
}
.regles-peuple .rules-md strong {
    color: var(--peuple-color);
}

/* Boutons d'ancres (📜 Troupes / 🏛️ Bâtiments / 📖 Cultures) sous le bandeau */
.rules-peuple-anchors {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 1.25rem;
}
.rules-peuple-anchor {
    background: var(--peuple-color);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 0.45rem 0.85rem;
    font-size: 0.95rem;
    font-family: inherit;
    cursor: pointer;
    transition: filter 0.15s, transform 0.05s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.rules-peuple-anchor:hover { filter: brightness(0.9); }
.rules-peuple-anchor:active { transform: translateY(1px); }

.rules-peuple-icon { font-size: 0.9em; }

/* Titres des 3 grandes sections en bas (Troupes / Bâtiments / Cultures) */
.rules-peuple-section-title {
    font-family: var(--font-title, inherit);
    font-size: 1.4rem;
    color: var(--peuple-color);
    border-left: 5px solid var(--peuple-color);
    padding-left: 12px;
    margin: 1.6rem 0 0.6rem;
    scroll-margin-top: 0.5rem;
}

/* Sous-titres des bâtiments d'origine (Caserne / Donjon / Eglise / …) */
.rules-peuple-subsection {
    margin: 1rem 0 0.4rem;
    font-size: 1.05rem;
    color: var(--color-text);
}

/* Tableaux : cellules de données teintées à la couleur du peuple,
   en-têtes neutres, scroll horizontal sur mobile. */
.rules-peuple-table-wrap {
    overflow-x: auto;
    margin-bottom: 0.5rem;
}
.rules-peuple-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.rules-peuple-table th,
.rules-peuple-table td {
    padding: 0.4rem 0.6rem;
    border: 1px solid rgba(0, 0, 0, 0.15);
    vertical-align: top;
    text-align: center;
}
/* Première colonne (Nom) : alignée à gauche pour la lisibilité,
   les autres colonnes (chiffres et codes courts) restent centrées. */
.rules-peuple-table th:first-child,
.rules-peuple-table td:first-child {
    text-align: left;
}
.rules-peuple-table thead th {
    background: var(--color-bg-light);
    color: var(--color-text);
    font-weight: 700;
    white-space: nowrap;
}
.rules-peuple-table tbody td {
    background: var(--peuple-color);
    color: #fff;
    font-weight: 700;
}
/* Exception : la colonne « Requis » (Dep_culture) du tableau Troupes/
   Bâtiments reste en poids normal — le reste du tbody est en gras pour
   homogénéiser avec les en-têtes. La table cultures n'a pas de colonne
   Requis (les pré-requis sont nommés "Prérequis", colonne 3) ; tous ses
   td restent en gras par défaut. */
.rules-peuple-table-units tbody td:nth-child(2) {
    font-weight: normal;
}
.rules-md table {
    border-collapse: collapse;
    margin: 0.9rem 0;
    width: 100%;
    font-size: 0.95rem;
}
.rules-md th,
.rules-md td {
    border: 1px solid var(--color-border);
    padding: 0.4rem 0.7rem;
    text-align: left;
}
.rules-md th {
    background-color: var(--color-bg);
    font-weight: 600;
}

/* ── Responsive : ≤ 768 px → drawer ─────────────────────────── */
@media (max-width: 768px) {
    .rules-layout {
        grid-template-columns: 1fr;
        gap: 0.75rem;
        padding: 0.75rem;
    }

    .rules-toc-burger {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.45rem 0.85rem;
        background-color: var(--color-bg-secondary);
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        color: var(--color-accent-dark);
        font-weight: 600;
        cursor: pointer;
        font-size: 0.95rem;
        align-self: flex-start;
        margin-bottom: 0.5rem;
    }

    .rules-toc {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        max-height: 100vh;
        width: 82%;
        max-width: 320px;
        padding: 3rem 1rem 1rem;
        background-color: var(--color-bg-secondary);
        border-left: 2px solid var(--color-border);
        box-shadow: -4px 0 16px rgba(0, 0, 0, 0.18);
        transform: translateX(100%);
        transition: transform 280ms ease;
        z-index: 200;
        align-self: stretch;
        border-radius: 0;
    }
    .rules-toc.rules-toc-open {
        transform: translateX(0);
    }

    .rules-toc-close {
        display: block;
        position: absolute;
        top: 0.5rem;
        right: 0.75rem;
        background: none;
        border: none;
        font-size: 1.4rem;
        color: var(--color-text);
        cursor: pointer;
        padding: 0.25rem 0.5rem;
        line-height: 1;
    }

    .rules-md {
        padding: 1.1rem 1rem;
        font-size: 0.95rem;
    }
    .rules-md h1 { font-size: 1.5rem; }
    .rules-md h2 { font-size: 1.2rem; }
    .rules-md h3 { font-size: 1.05rem; }

    .rules-peuple-banner {
        padding: 1.1rem 1rem 1rem;
    }
    .rules-peuple-title {
        font-size: 1.55rem;
    }
}


/* ═════════════════════════════════════════════════════════════════
   ── Pigeonnier (messagerie) ────────────────────────────────────
   ═════════════════════════════════════════════════════════════════ */

/* Pastille non-lus dans la nav (à côté du lien "Pigeonnier") */
.nav-unread-badge {
    display: inline-block;
    margin-left: 0.35rem;
    background-color: #c1272d;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    line-height: 1.2;
    vertical-align: middle;
}

/* Variante point rouge sans compteur (Forum) — même couleur, taille
   réduite, sans texte. */
.nav-unread-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border-radius: 50%;
    text-indent: -9999px;
    overflow: hidden;
}

/* Header de la page Pigeonnier */
.pigeonnier-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

/* Onglets Reçus / Envoyés */
.pigeonnier-tabs {
    display: flex;
    gap: 0.5rem;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 1rem;
}
.pigeonnier-tab {
    background: none;
    border: none;
    padding: 0.5rem 1rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-muted);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}
.pigeonnier-tab:hover { color: var(--color-text); }
.pigeonnier-tab.active {
    color: var(--color-accent-dark);
    border-bottom-color: var(--color-accent-dark);
}
.pigeonnier-unread-pill {
    display: inline-block;
    margin-left: 0.4rem;
    background-color: #c1272d;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
}

/* Liste de messages */
.pigeonnier-list {
    display: flex;
    flex-direction: column;
}
.pigeonnier-item {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    transition: background-color 0.12s;
}
.pigeonnier-item:hover {
    background-color: rgba(184, 134, 11, 0.06);
}
.pigeonnier-dot {
    flex-shrink: 0;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    margin-top: 0.4rem;
}
.pigeonnier-dot-unread { background-color: #2c5fa8; }
.pigeonnier-dot-read   { background-color: transparent; border: 2px solid var(--color-border); }
.pigeonnier-item-body { flex: 1; min-width: 0; }
.pigeonnier-item-subject {
    font-size: 1rem;
    line-height: 1.3;
    margin-bottom: 0.15rem;
    color: var(--color-text);
}
.pigeonnier-subject-unread { font-weight: 700; }
.pigeonnier-subject-read   { font-weight: 500; color: var(--color-text-muted); }
.pigeonnier-thread-tag {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    background: rgba(184, 134, 11, 0.12);
    padding: 0.02rem 0.35rem;
    border-radius: 3px;
    margin-left: 0.3rem;
}
.pigeonnier-item-meta {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}
.pigeonnier-item-meta-sep { opacity: 0.5; }

/* Détail message + fil */
.pigeonnier-detail-actions {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.pigeonnier-detail-actions-right {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.pigeonnier-detail-subject {
    font-family: var(--font-title, inherit);
    font-size: 1.6rem;
    margin: 0 0 1rem;
    color: var(--color-accent-dark);
}
.pigeonnier-thread {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.pigeonnier-msg {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 0.85rem 1rem;
}
.pigeonnier-msg-active {
    border-left: 4px solid var(--color-accent);
}
.pigeonnier-msg-header {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin-bottom: 0.5rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px dashed var(--color-border);
}
.pigeonnier-msg-family { color: var(--color-text-muted); font-weight: normal; }
.pigeonnier-msg-date { color: var(--color-text-muted); font-style: italic; }
.pigeonnier-msg-body {
    line-height: 1.55;
    white-space: pre-wrap;
}

/* Compose */
.pigeonnier-compose {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-width: 720px;
}
.pigeonnier-compose label {
    margin-top: 0.6rem;
    font-weight: 600;
    color: var(--color-text);
}
.pigeonnier-compose select,
.pigeonnier-compose input,
.pigeonnier-compose textarea {
    width: 100%;
    box-sizing: border-box;
}
.pigeonnier-compose textarea {
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.45;
    resize: vertical;
}
#pig-body-counter {
    margin-left: 0.5rem;
    font-weight: normal;
    font-style: italic;
}

/* ── Page Réglages ───────────────────────────────────────────── */
.reglages-section {
    margin-top: 1rem;
}
.reglages-form {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-width: 480px;
}
.reglages-form input[type="number"] {
    max-width: 120px;
}
/* ── Clans (étape 3) ──────────────────────────────────────────── */

.clan-banner {
    display: inline-block;
    border: 1px solid var(--color-border);
    border-radius: 3px;
    vertical-align: middle;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.clan-banner-sm { width: 32px; height: 16px; }
.clan-banner-md { width: 60px; height: 30px; }
.clan-banner-lg { width: 90px; height: 60px; }

.clan-my-card {
    border-left: 4px solid var(--color-accent);
}
.clan-my-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}
.clan-meta {
    margin: 0.25rem 0 0;
    color: var(--color-text-muted);
    font-size: 0.95rem;
}
.clan-leader-badge {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background-color: var(--color-gold);
    color: var(--color-text);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
}

.clan-member-list,
.clan-pending-list,
.clan-request-list {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.clan-member-list li,
.clan-pending-list li {
    padding: 0.4rem 0.6rem;
    background-color: var(--color-bg-light);
    border-radius: 4px;
}
.clan-request-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem 0.7rem;
    background-color: var(--color-bg-light);
    border-radius: 4px;
}
.clan-request-list li .btn { margin-left: 0.3rem; }

.clan-table tr { cursor: default; }
.clan-table td:first-child { width: 50px; }

/* ── Étape 3 polish : liens entité (Maison/héros/clan) ──────── */
/* Tous les liens internes pointant vers une fiche publique d'entité utilisent
   la couleur d'accent — jamais le bleu lien par défaut du navigateur. */
a[href^="#family-public/"],
a[href^="#general/"],
a[href^="#clan-public/"],
a[href^="#general-detail/"] {
    color: var(--color-accent);
    text-decoration: none;
}
a[href^="#family-public/"]:hover,
a[href^="#general/"]:hover,
a[href^="#clan-public/"]:hover,
a[href^="#general-detail/"]:hover {
    color: var(--color-accent-dark);
    text-decoration: underline;
}

/* ── Annuaire ──────────────────────────────────────────────── */
.annuaire-stats-table {
    width: auto;
    border-collapse: collapse;
    margin: 0.5rem 0;
}
.annuaire-stats-table th,
.annuaire-stats-table td {
    padding: 0.4rem 1rem;
    border: 1px solid var(--color-border);
    text-align: center;
}
.annuaire-stats-table th { background-color: var(--color-bg-light); }
.annuaire-stats-table td:first-child { text-align: left; font-weight: 600; }

.annuaire-letters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
    padding: 0.5rem;
    background-color: var(--color-bg-light);
    border-radius: var(--radius);
}
.annuaire-letter-btn {
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--color-border);
    background-color: var(--color-bg);
    cursor: pointer;
    font-family: inherit;
    border-radius: 3px;
    min-width: 28px;
}
.annuaire-letter-btn:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}
.annuaire-letter-btn.active {
    background-color: var(--color-accent);
    color: var(--color-bg);
    border-color: var(--color-accent);
    font-weight: 700;
}

.annuaire-table {
    width: 100%;
    border-collapse: collapse;
}
.annuaire-table th,
.annuaire-table td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
}
.annuaire-table thead th { background-color: var(--color-bg-light); }

/* Colonne « Bannière » de l'Annuaire : largeur fixe pour éviter la danse
   des colonnes selon que les bannières sont configurées ou uploadées. */
.annuaire-banner-cell { width: 130px; padding: 0.4rem 0.75rem; }
.annuaire-banner-cell .banner { width: 120px; height: 40px; }
.annuaire-banner-empty {
    color: var(--color-text-muted);
    font-style: italic;
    font-size: 0.9rem;
}

/* ── Bandeau clan archivé ──────────────────────────────────── */
.clan-archived-banner {
    background-color: var(--color-bg-secondary);
    color: var(--color-text-muted);
    border-left: 4px solid var(--color-muted);
    padding: 0.5rem 1rem;
    margin-bottom: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ── Bandeau "Clan : [Nom] [Bannière]" sur la fiche Maison ───────── */
.family-clan-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}
.family-clan-label {
    color: var(--color-text-muted);
    font-size: 0.95rem;
}
.family-clan-link {
    color: var(--color-accent);
    text-decoration: none;
    font-weight: 600;
}
.family-clan-link:hover {
    text-decoration: underline;
    color: var(--color-accent-dark);
}
.family-clan-line .banner {
    /* Aligne la bannière (div block) sur la même ligne que le texte */
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

/* ── Fief (étape 4 — refonte 4 zones défensives) ────────────────── */
.fief-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.fief-prestige-line {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.95rem;
}

.fief-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 1.25rem;
    align-items: start;
}
.fief-layout-public { grid-template-columns: 1fr; }
@media (max-width: 900px) {
    .fief-layout { grid-template-columns: 1fr; }
}

.fief-catalog {
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.75rem;
    max-height: 80vh;
    overflow-y: auto;
}
.fief-catalog .section-title { margin-top: 0; }
.fief-catalog .inspi-cat {
    margin: 0.75rem 0 0.4rem;
    font-size: 1rem;
    color: var(--color-accent);
}
.fief-catalog-cat-defensive { color: #b91c1c !important; }
.fief-catalog-cat-animal    { color: #166534 !important; }

.fief-catalog-list {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.fief-catalog-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0.5rem 0.6rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: border-color 0.15s, background 0.15s;
}
.fief-catalog-item:hover {
    border-color: color-mix(in srgb, var(--color-accent) 60%, var(--color-border));
}
.fief-catalog-item.selected {
    border-color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 8%, var(--color-bg));
    font-weight: 600;
}
.fief-catalog-name { font-size: 0.95rem; }
.fief-catalog-meta { font-size: 0.8rem; color: var(--color-text-muted); }

/* ── Wrapper de la grille (avec décor visuel autour) ───────────── */
/* Padding généreux pour accueillir des bandes décoratives larges :
     - haut : forêt / collines (≈ 90 px)
     - bas  : mer (≈ 90 px)
     - côtés : forêts denses (≈ 60 px)
   `width: fit-content` colle le wrapper exactement à la taille du board +
   décor : sans cela, le board (margin: 0 auto) flotterait au centre du
   `1fr` de `.fief-layout` et créerait une bande blanche entre la colonne
   défensive et le décor latéral. */
.fief-grid-wrapper {
    position: relative;
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 90px 60px;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    overflow: hidden;
}
.fief-decor {
    position: absolute;
    pointer-events: none;
    opacity: 0.65;
}
.fief-decor-top {
    top: 0; left: 0; right: 0; height: 90px;
    background:
        radial-gradient(circle at 15% 100%, #2f4a25 0 28px, transparent 32px),
        radial-gradient(circle at 35% 100%, #3a5a30 0 36px, transparent 40px),
        radial-gradient(circle at 60% 100%, #2f4a25 0 30px, transparent 34px),
        radial-gradient(circle at 82% 100%, #3a5a30 0 38px, transparent 42px),
        linear-gradient(to bottom, #5a7d48 0%, #6b8a52 50%, #8aa66e 100%);
    background-repeat: repeat-x, repeat-x, repeat-x, repeat-x, no-repeat;
    background-size: 200px 90px, 220px 90px, 240px 90px, 260px 90px, auto;
}
.fief-decor-bottom {
    bottom: 0; left: 0; right: 0; height: 90px;
    background:
        repeating-linear-gradient(90deg,
            rgba(255, 255, 255, 0.18) 0 4px,
            transparent 4px 24px),
        linear-gradient(to top, #1f3a5a 0%, #2c5079 60%, #4071a3 100%);
}
.fief-decor-left-bg,
.fief-decor-right-bg {
    top: 90px; bottom: 90px;
    width: 60px;
    background:
        radial-gradient(circle at 50% 30%, #2f4a25 0 16px, transparent 20px),
        radial-gradient(circle at 50% 70%, #3a5a30 0 20px, transparent 24px),
        linear-gradient(135deg, #2d4a2a 0%, #4a6a3a 50%, #2d4a2a 100%);
    background-repeat: repeat-y, repeat-y, no-repeat;
    background-size: 60px 80px, 60px 90px, auto;
}
.fief-decor-left-bg  { left: 0; }
.fief-decor-right-bg { right: 0; }

/* ── « board » : layout principal en 4 zones ──────────────────── */
/* Variable --fief-cell donnée en inline style (px) sur l'élément.
   Les zones défensives utilisent une demi-cellule (cell/2) pour leur
   dimension orthogonale (hauteur de la rangée du haut, largeur des
   colonnes latérales). Les coins du haut sont demi-largeur × demi-hauteur. */
.fief-board {
    display: grid;
    /* col1 = demi-cellule (defense_left + corners),
       col2 = standard 12 cellules,
       col3 = demi-cellule (defense_right + corners) */
    grid-template-columns:
        calc(var(--fief-cell) / 2)
        calc(var(--fief-cell) * 12)
        calc(var(--fief-cell) / 2);
    /* row1 = demi-cellule (defense_top), row2 = standard 12 cellules */
    grid-template-rows:
        calc(var(--fief-cell) / 2)
        calc(var(--fief-cell) * 12);
    margin: 0 auto;
    border: 1px solid var(--color-border);
    background: rgba(0, 0, 0, 0.08);
    position: relative;
    z-index: 1;
}

/* Chaque zone est une grille interne SANS gap : la séparation entre cases
   se fait via la bordure de chaque cellule (cf. plus bas).
   Un `gap` ferait déborder les cellules de la zone hors de la colonne /
   ligne qui leur est allouée dans .fief-board (12 × cell + 11 × gap > la
   largeur réservée), provoquant un décalage de la colonne droite + un
   chevauchement de la rangée du bas avec le décor mer. */
.fief-zone { display: grid; gap: 0; }

/* Rangée du haut : 14 cases (corner + 12 + corner), une seule ligne demi-haut.
   Span 1 → 4 = sur la 1re ligne, colonnes 1 (corner-left) à 3 (corner-right). */
.fief-zone-top {
    grid-column: 1 / 4;
    grid-row: 1;
    grid-template-columns:
        calc(var(--fief-cell) / 2)
        repeat(12, var(--fief-cell))
        calc(var(--fief-cell) / 2);
    grid-template-rows: calc(var(--fief-cell) / 2);
}
/* Colonne gauche : 1 col demi-largeur, 12 lignes pleine hauteur */
.fief-zone-left {
    grid-column: 1;
    grid-row: 2;
    grid-template-columns: calc(var(--fief-cell) / 2);
    grid-template-rows: repeat(12, var(--fief-cell));
}
/* Colonne droite : idem à droite */
.fief-zone-right {
    grid-column: 3;
    grid-row: 2;
    grid-template-columns: calc(var(--fief-cell) / 2);
    grid-template-rows: repeat(12, var(--fief-cell));
}
/* Zone centrale standard : 12 × 12 cases pleines */
.fief-zone-standard {
    grid-column: 2;
    grid-row: 2;
    grid-template-columns: repeat(12, var(--fief-cell));
    grid-template-rows: repeat(12, var(--fief-cell));
}

/* ── Cases ────────────────────────────────────────────────────── */
/* Bordure box-sizing: border-box → la bordure 1px reste à l'intérieur des
   dimensions allouées, donc pas de débordement comme avec un gap. */
.fief-cell-empty,
.fief-cell-building {
    background: rgba(245, 235, 215, 0.85);
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
    min-width: 0;
    min-height: 0;
}
.fief-zone-top .fief-cell-empty,
.fief-zone-top .fief-cell-building,
.fief-zone-left .fief-cell-empty,
.fief-zone-left .fief-cell-building,
.fief-zone-right .fief-cell-empty,
.fief-zone-right .fief-cell-building {
    /* Périphérie : teinte légèrement différente pour signifier la zone défensive */
    background: rgba(220, 200, 165, 0.85);
}
.fief-cell-empty:hover {
    background: rgba(245, 235, 215, 1);
    cursor: pointer;
}
.fief-zone-top .fief-cell-empty:hover,
.fief-zone-left .fief-cell-empty:hover,
.fief-zone-right .fief-cell-empty:hover {
    background: rgba(220, 200, 165, 1);
}
.fief-cell-empty.fief-ghost-ok {
    background: rgba(34, 197, 94, 0.45) !important;
    outline: 2px solid #16a34a;
    outline-offset: -2px;
}
.fief-cell-empty.fief-ghost-bad {
    background: rgba(220, 38, 38, 0.45) !important;
    outline: 2px solid #b91c1c;
    outline-offset: -2px;
}

/* Bâtiments posés */
.fief-cell-building {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(180deg, #b45309 0%, #78350f 100%);
    color: #fff;
    border: 2px solid #5c2a08;
    border-radius: 4px;
    cursor: pointer;
    padding: 0.15rem;
    font-weight: 600;
    overflow: hidden;
}
.fief-cell-building.fief-cell-animal {
    background: linear-gradient(180deg, #166534 0%, #052e1a 100%);
    border-color: #062817;
}
.fief-cell-building.fief-cell-defensive {
    background: linear-gradient(180deg, #6b21a8 0%, #2e1065 100%);
    border-color: #2e1065;
}
.fief-cell-building { position: relative; }
.fief-cell-building:hover { filter: brightness(1.15); }
/* Image PNG superposée au placeholder coloré. Les PNG par défaut
   (data/fief_images/{slug}_{W}x{H}.png) sont transparents au MVP, donc
   le placeholder coloré reste visible jusqu'à ce qu'une vraie image
   soit déposée par l'utilisateur. */
.fief-cell-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}
.fief-cell-name,
.fief-cell-level,
.fief-cell-level-only {
    position: relative;
    z-index: 1;
}
.fief-cell-name {
    font-size: 0.65rem;
    line-height: 1.05;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
}
.fief-cell-level {
    font-size: 0.6rem;
    margin-top: 1px;
    background: rgba(0, 0, 0, 0.35);
    padding: 0 4px;
    border-radius: 8px;
}

/* Cellules défensives : seul le chiffre du niveau s'affiche, centré, gros
   et lisible malgré la taille réduite (24×48 ou 48×24 px). Le nom complet
   du bâtiment reste accessible via le tooltip `title=…` au survol. */
.fief-cell-defensive .fief-cell-level-only {
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.55);
    line-height: 1;
}

/* Sur les très petites tailles : réduit la taille de cellule */
@media (max-width: 700px) {
    .fief-board { --fief-cell: 32px !important; }
    .fief-cell-name { font-size: 0.55rem; }
    .fief-cell-level { font-size: 0.5rem; }
}

/* ── Pages peuples (#peuples + #peuple/{id}) ────────────────────── */
.peuple-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.85rem;
    margin-top: 1rem;
}
.peuple-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 0.85rem 1rem;
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--color-text);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.peuple-card:hover {
    border-color: var(--color-accent);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.peuple-card-icon { font-size: 1.6rem; line-height: 1; }
.peuple-card-title {
    font-weight: 700;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.peuple-card-desc {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    line-height: 1.35;
}

/* Détail */
.peuple-detail-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.peuple-detail-icon { font-size: 1.6rem; }
.peuple-detail-summary {
    color: var(--color-text-muted);
    font-style: italic;
    margin: 0 0 1.25rem;
}
.peuple-subsection {
    margin: 1rem 0 0.4rem;
    font-size: 1.05rem;
    color: var(--color-text);
}

/* Tableau standard pour troupes/bâtiments/cultures.
   Les cellules de DONNÉES portent un style inline (fond couleur peuple +
   texte blanc) appliqué par le frontend ; les en-têtes restent neutres. */
.peuple-table-wrap {
    overflow-x: auto;
    margin-bottom: 0.5rem;
}
.peuple-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.peuple-table th,
.peuple-table td {
    padding: 0.4rem 0.6rem;
    border: 1px solid rgba(0, 0, 0, 0.15);
    vertical-align: top;
    text-align: left;
}
.peuple-table thead th {
    background: var(--color-bg-light);
    color: var(--color-text);
    font-weight: 700;
    white-space: nowrap;
}

/* ──────────────────────────────────────────────────────────────
   Forum (prompt A — base, sans Places Publiques)
   Trois vues : accueil, section, thread.
   ────────────────────────────────────────────────────────────── */

.forum-page { display: block; }
.forum-intro {
    color: var(--color-text-muted);
    margin: 0.25rem 0 1.5rem;
    font-style: italic;
}
.forum-back {
    display: inline-block;
    margin-bottom: 0.75rem;
}

/* ── VUE 1 — Accueil ───────────────────────────────────────── */
.forum-category {
    margin: 1.25rem 0 2rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
}
.forum-category:first-of-type {
    border-top: none;
    padding-top: 0;
}
.forum-category-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.4rem;
}
.forum-category-title {
    font-size: 1.15rem;
    margin: 0;
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.forum-cat-badge {
    font-size: 0.75rem;
    padding: 0.15rem 0.55rem;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    color: var(--color-text-muted);
}
.forum-category-desc {
    color: var(--color-text-muted);
    font-style: italic;
    margin: 0 0 0.75rem;
}
.forum-section-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.75rem;
}
.forum-section-card {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.85rem 1rem;
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-text);
    text-decoration: none;
    transition: background 0.15s ease;
}
.forum-section-card:hover { background: var(--color-bg-secondary); }
.forum-section-name { font-weight: 700; }
.forum-section-desc {
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

/* ── VUE 2 — Section (liste des threads) ───────────────────── */
.forum-section-desc-large {
    color: var(--color-text-muted);
    font-style: italic;
    margin: 0 0 1rem;
}
.forum-section-actions {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.forum-thread-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.forum-thread-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.5rem 0.85rem;
    align-items: baseline;
    padding: 0.65rem 0.85rem;
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-text);
    text-decoration: none;
    transition: background 0.15s ease;
}
.forum-thread-row:hover { background: var(--color-bg-secondary); }
.forum-thread-row.is-pinned { background: #FFF6D9; }
.forum-thread-icons {
    font-size: 1rem;
    line-height: 1;
}
.forum-thread-title {
    font-weight: 700;
    word-break: break-word;
}
.forum-thread-meta {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    text-align: right;
    grid-column: 2 / -1;
}
.forum-row-family {
    color: var(--color-text-muted);
    font-style: italic;
}
.forum-form-card { margin-top: 1rem; }
.forum-form-card textarea,
.forum-form-card input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 0.5rem;
}

/* ── VUE 3 — Thread ────────────────────────────────────────── */
.forum-thread-title-h1 { margin-bottom: 0.25rem; }
.forum-thread-meta-h1 {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    margin-top: 0;
    margin-bottom: 1rem;
}
.forum-admin-controls {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

/* ── Modale GitHub-style : suppression thread (chantier #4) ── */
.forum-delete-thread-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.forum-delete-thread-modal.open { display: flex; }
.forum-delete-thread-content {
    background: #fffaf2;
    border: 1px solid #b88a2c;
    border-radius: 8px;
    width: min(520px, 92vw);
    max-height: 90vh;
    overflow: auto;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.forum-delete-thread-header {
    padding: 1rem 1.2rem;
    border-bottom: 1px solid #e3d5a5;
    background: #fbeed1;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.forum-delete-thread-title {
    margin: 0;
    color: var(--color-error);
    font-size: 1.1rem;
}
.forum-delete-thread-body {
    padding: 1rem 1.2rem;
}
.forum-delete-thread-warning {
    margin: 0 0 1rem 0;
    color: var(--color-error);
}
.forum-delete-thread-quoted {
    background: #f4e8c4;
    padding: 0.5rem 0.7rem;
    border-radius: 4px;
    font-style: italic;
    color: #5a3d10;
    margin: 0.5rem 0 0.8rem;
    word-break: break-word;
}
.forum-delete-thread-input {
    width: 100%;
    padding: 0.55rem 0.7rem;
    font-size: 0.95rem;
    border: 1px solid #b88a2c;
    border-radius: 4px;
    background: #fff;
    box-sizing: border-box;
}
.forum-delete-thread-feedback {
    min-height: 1.2rem;
    margin: 0.4rem 0 0;
}
.forum-delete-thread-feedback.error { color: var(--color-error); }
.forum-delete-thread-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    padding: 0.8rem 1.2rem 1rem;
    border-top: 1px solid #e3d5a5;
}
.forum-delete-thread-confirm {
    background: var(--color-error);
    border-color: var(--color-error);
}
.forum-delete-thread-confirm:disabled {
    background: #d3b6b6;
    border-color: #d3b6b6;
    cursor: not-allowed;
}

/* ── Toast minimal pour confirmer / signaler les erreurs ── */
.forum-toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%) translateY(120%);
    padding: 0.7rem 1.2rem;
    border-radius: 6px;
    background: #333;
    color: #fff;
    font-size: 0.95rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    transition: transform 0.25s ease;
    z-index: 1100;
    max-width: 80vw;
}
.forum-toast.open { transform: translateX(-50%) translateY(0); }
.forum-toast-success { background: #2e7d32; }
.forum-toast-error   { background: #c62828; }
.forum-thread-locked {
    background: #FBE9E7;
    border-left: 4px solid var(--color-error);
    padding: 0.6rem 1rem;
    margin: 0.5rem 0 1rem;
    border-radius: 4px;
    color: var(--color-text);
    font-weight: 600;
}

.forum-posts {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.forum-post {
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 1rem 1.1rem;
}
.forum-post-deleted {
    background: var(--color-bg-secondary);
    opacity: 0.85;
}
.forum-post-header {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: center;
    border-bottom: 1px dashed var(--color-border);
    padding-bottom: 0.5rem;
    margin-bottom: 0.6rem;
}
.forum-author {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}
/* Le rendu de la bannière (Maison + Clan) dans un post forum utilise
   directement les classes .banner.banner-sm de banner_renderer.js (rendu
   unifié partout dans l'app). On adapte juste les marges ici. */
.forum-author .banner {
    margin-right: 0.15rem;
}
.forum-author-name {
    font-weight: 700;
    color: var(--color-text);
    text-decoration: none;
}
.forum-author-name:hover { text-decoration: underline; }
.forum-author-anonymous {
    font-style: italic;
    color: var(--color-text-muted);
}
.forum-author-family {
    color: var(--color-text-muted);
    text-decoration: none;
}
.forum-author-family:hover { text-decoration: underline; }
.forum-author-clan {
    color: var(--color-text);
    font-weight: 600;
    text-decoration: none;
}
.forum-author-clan-wrap::after {
    content: " · ";
    color: var(--color-text-muted);
}
.forum-post-date {
    margin-left: auto;
    color: var(--color-text-muted);
    font-size: 0.85rem;
}
.forum-post-edited {
    margin-left: 0.5rem;
    font-style: italic;
    color: var(--color-text-muted);
}
.forum-post-content {
    line-height: 1.55;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.forum-post-content blockquote {
    border-left: 3px solid var(--color-border);
    padding-left: 0.85rem;
    color: var(--color-text-muted);
    margin: 0.5rem 0;
}
.forum-post-content code {
    background: var(--color-bg-secondary);
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.92em;
}
.forum-post-content pre {
    background: var(--color-bg-secondary);
    padding: 0.6rem 0.8rem;
    border-radius: 4px;
    overflow-x: auto;
}
.forum-post-content pre code {
    background: transparent;
    padding: 0;
}
.forum-post-content-deleted {
    color: var(--color-text-muted);
    font-style: italic;
}
.forum-post-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.9rem;
    padding-top: 0.55rem;
    border-top: 1px dashed var(--color-border);
}
.forum-reactions {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
}
.forum-reaction-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.55rem;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1;
}
.forum-reaction-btn:hover { background: var(--color-bg-secondary); }
.forum-reaction-btn.is-active {
    background: #FFF6D9;
    border-color: #C8A246;
}
.forum-reaction-btn[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
}
.forum-post-actions {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.forum-post-action {
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text);
    padding: 0.2rem 0.65rem;
    border-radius: 12px;
    cursor: pointer;
    font-size: 0.85rem;
}
.forum-post-action:hover { background: var(--color-bg-secondary); }
.forum-post-action-danger {
    color: var(--color-error);
    border-color: var(--color-error);
}
.forum-post-action-danger:hover { background: #FBE9E7; }
.forum-edit-textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 5rem;
}
.forum-reply-card { margin-top: 1rem; }
.forum-reply-card textarea {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 0.5rem;
}
@media (max-width: 720px) {
    .forum-thread-row { grid-template-columns: auto 1fr; }
    .forum-thread-meta {
        grid-column: 1 / -1;
        text-align: left;
    }
    .forum-post-date { margin-left: 0; }
}

/* ── Places Publiques ──────────────────────────────────────────── */

/* Sous-titre statut de la partie. */
.forum-pp-subheader {
    margin: -0.5rem 0 0.5rem;
    color: var(--color-text-muted);
    font-style: italic;
    font-size: 0.95rem;
}

/* Bandeau d'information : raison du blocage / countdown / fenêtre
   vainqueurs ouverte. Couleur douce parchemin (≠ erreur). */
.forum-pp-note {
    background: #FFF6D9;
    border-left: 4px solid #C8A246;
    padding: 0.55rem 0.9rem;
    margin: 0.5rem 0 1rem;
    border-radius: 4px;
    color: var(--color-text);
}
.forum-pp-note-victor {
    background: #FFF1D6;
    border-left-color: #B45309;
    font-weight: 600;
}

/* Zone Mot des vainqueurs en haut du fil. */
.forum-victors-zone {
    background: #FFF6D9;
    border: 2px solid #C8A246;
    border-radius: 8px;
    padding: 0.75rem 1rem 1rem;
    margin: 0 0 1rem;
}
.forum-victors-title {
    margin: 0 0 0.6rem;
    font-size: 1rem;
    color: #8B5A1B;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.forum-victors-zone .forum-post {
    border-color: #C8A246;
    background: #FBF7EC;
}

/* Compte Système : italique, sans bannière, sans lien. */
.forum-author-system {
    align-items: center;
}
.forum-author-system-name {
    font-style: italic;
    color: var(--color-text-muted);
    font-weight: 600;
}

/* ── Admin : Gestion des Maisons ──────────────────────────────── */

.admin-families {
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 1rem 1.2rem;
}
.admin-families-toolbar {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin: 0.5rem 0 1rem;
    flex-wrap: wrap;
}
.admin-families-toolbar input[type="search"] {
    flex: 1 1 280px;
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-bg);
    color: var(--color-text);
}
.admin-families-count {
    margin: 0;
    font-size: 0.85rem;
}
.admin-families-table th, .admin-families-table td {
    padding: 0.45rem 0.7rem;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: middle;
}
.admin-families-table thead th {
    background: var(--color-bg-secondary);
    font-weight: 700;
    color: var(--color-text);
}

/* Modale de renommage (générique). */
.modal-card {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 1.25rem 1.5rem 1rem;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);
    z-index: 1001;
    width: min(92vw, 480px);
    max-height: 90vh;
    overflow-y: auto;
}
.modal-card label {
    display: block;
    margin-top: 0.6rem;
    font-weight: 600;
    color: var(--color-text);
}
.modal-card input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-bg);
    color: var(--color-text);
    margin-top: 0.25rem;
}
.modal-card input[disabled] {
    background: var(--color-bg-secondary);
    color: var(--color-text-muted);
}
.modal-title {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
    color: var(--color-text);
}
.admin-rename-modal { /* alias spécifique au cas où on personnalise plus tard */ }

/* ── Politique de mot de passe : liste à coches en temps réel ────── */

.password-policy-checklist {
    list-style: none;
    margin: 0.4rem 0 1rem;
    padding: 0.5rem 0.75rem;
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}
.password-policy-checklist li {
    margin: 0.15rem 0;
    line-height: 1.4;
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
}
.password-policy-checklist .policy-rule-icon {
    display: inline-block;
    width: 1.1em;
    text-align: center;
    font-weight: 700;
}
.password-policy-checklist li.policy-rule-ok {
    color: #166534; /* vert forêt — cohérent avec la palette */
}
.password-policy-checklist li.policy-rule-ok .policy-rule-icon {
    color: #166534;
}
.password-policy-checklist li.policy-rule-ko {
    color: var(--color-text-muted);
}
.password-policy-checklist li.policy-rule-ko .policy-rule-icon {
    color: var(--color-border);
}