/* 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 */

    /* Design system : aide / informations.
       Couleur dédiée aux composants d'aide (icônes ⓘ, tooltips, futurs
       encadrés). Bleu encre évoque l'instruction / l'archivage — cohérent
       avec le contexte médiéval-fantastique (encre de scribe). */
    --color-help:        #3A6788;    /* Bleu encre principal — icône, bordure */
    --color-help-bg:     #E8EEF3;    /* Bleu très pâle — fond tooltip / encadré */
    --color-help-hover:  #2C4F6B;    /* Bleu encre foncé — hover/focus icône */

    /* 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;

    /* ── Échelle d'espacement (CADRAGE_DESIGN.md §2) ─────────────── */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-8: 48px;

    /* ── Hiérarchie typographique (CADRAGE_DESIGN.md §2) ─────────── */
    /* Tokens de référence — NON appliqués à ce stade (Prompt 1).    */
    --type-title-size: 1.4rem;
    --type-subtitle-size: 1.1rem;
    --type-label-size: 0.78rem;
    --type-label-spacing: 0.08em;
    --type-value-size: 1.35rem;
    --type-body-size: 1rem;
    --type-hint-size: 0.85rem;
}

/* ── 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 {
    /* Wordmark : Marcellus (serif med-fan sobre, fontsource via <link> dans <head>).
       Fallback : Georgia (présent par défaut sur Windows/Mac/iOS/Android), puis serif. */
    font-family: 'Marcellus', Georgia, 'Times New Roman', serif;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.05;  /* compresse l'interligne du wordmark 2 lignes (Prompt 7e) */
    color: var(--color-accent);
    text-decoration: none;
    margin-right: auto;
    letter-spacing: 0.03em;
    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;
}

/* Zone droite (Prompt 7e) : 2 colonnes flex.
   Colonne 1 : .nav-account-stack — Admin (haut) + Réglages (bas)
               empilés verticalement, resserrés.
   Colonne 2 : bouton Déconnexion, isolé, centré verticalement par
               rapport au stack (via align-items: center sur nav-actions).
   Sur mobile (≤1024), .nav-account-stack passe en display: contents
   pour que Admin/Réglages/Déconnexion s'empilent comme avant. */
.nav-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
}
.nav-account-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.1rem;
    line-height: 1.2;
}

.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: var(--space-3) 1.5rem 2rem;  /* top compressé (Prompt 7c) : nav-block + tight */
}

.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 .card-title,
#family-public-content .section-title,
#family-public-content .stat-value {
    color: var(--family-accent, var(--color-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: 640px) {
    .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;
}
/* Prompt 7f Partie 4 : top = bannière + prestige (alignés au centre,
   prestige collé à droite) ; bottom = lien famille (largeur libre). */
.general-detail-family-compact-row--top {
    align-items: center;
}
.general-detail-family-compact-row--top .banner {
    flex-shrink: 0;
}
.general-detail-family-compact-row--top .general-detail-family-prestige {
    margin-left: auto;
}
.general-detail-family-compact-row--bottom {
    justify-content: flex-start;
}
.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: 640px) {
    .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);
}
/* Marges intérieures des cartes Ma Maison resserrées (Prompt 7c) — scope
   #family-view pour ne PAS impacter Famille publique ni les autres pages. */
#family-view .card {
    padding-top: var(--space-4);     /* 16px au lieu de 2rem (32px) */
    padding-bottom: var(--space-4);
    margin-top: var(--space-3);      /* 12px au lieu de 1.5rem (24px) */
    margin-bottom: var(--space-3);
}
#family-view .card-title,
#family-view .section-title,
#family-view .stat-value {
    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;
}

/* Variante en-tête (Ma Maison + Famille publique) — filet or à gauche
   et souligné or (CADRAGE_DESIGN.md §3 Direction B). */
.family-name-link.family-name-link--header {
    border-left: 2px solid var(--color-gold);
    padding-left: 0.75rem;
    text-decoration: underline;
    text-decoration-color: var(--color-gold);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
}

/* Devise de la famille — italique + semi-bold (600) pour rester lisible
   sans surcharger le rendu sur les polices à empattement. Couleur brun
   foncé renforcé (Direction B Prompt 7a) pour meilleur contraste. */
.family-motto {
    font-style: italic;
    font-weight: 600;
    color: var(--color-text);
    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;
}

/* Layout horizontal en-tête Maison + Famille publique (Prompt 7f Partie 1)
   — bannière + nom + devise à gauche, stats à droite, flex space-between.
   `flex-wrap: wrap` fait descendre les stats en dessous quand la largeur
   est insuffisante (mobile). Aucun media query nécessaire à ≥641. */
.family-header-inner.family-header-inner--row,
.family-public-body-row--header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}
.family-header-main,
.family-public-main {
    flex: 1;
    min-width: 240px;
}
.family-header-inner--row .family-stats,
.family-public-body-row--header .family-stats {
    margin-top: 0;
    flex-shrink: 0;
}

/* ── Tooltip information — composant utilitaire (Direction B) ──
   Icône ⓘ + popover au survol/focus. Parchemin clair, filet or,
   ombre douce, flèche décorative. Réutilisable hors Ma Maison. */
.info-tooltip {
    position: relative;
    display: inline-block;
    margin-left: var(--space-2);
    cursor: help;
    vertical-align: middle;
    font-weight: normal;
    font-style: normal;
    top: -3px;             /* léger relèvement optique (Prompt 7g) — recale l'icône avec les majuscules du titre serif */
}
.info-tooltip-icon {
    display: inline-block;
    width: 1.2rem;
    height: 1.2rem;
    line-height: 1.2rem;
    text-align: center;
    font-size: 1.05rem;
    color: var(--color-help);
    transition: color 120ms ease;
    border-radius: 50%;
}
.info-tooltip:hover .info-tooltip-icon,
.info-tooltip:focus-within .info-tooltip-icon {
    color: var(--color-help-hover);
}
.info-tooltip:focus-within {
    outline: 2px solid var(--color-help);
    outline-offset: 2px;
    border-radius: 50%;
}
.info-tooltip-content {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    min-width: 280px;
    max-width: 360px;
    background: var(--color-help-bg);
    color: var(--color-text);
    border: 1px solid var(--color-help);
    border-radius: var(--radius);
    padding: var(--space-3);
    font-size: 0.9rem;
    font-weight: normal;
    font-style: normal;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.5;
    box-shadow: 0 4px 14px rgba(60, 30, 10, 0.18);
    z-index: 100;
    transition: opacity 150ms ease, visibility 150ms ease;
    text-align: left;
}
.info-tooltip:hover .info-tooltip-content,
.info-tooltip:focus-within .info-tooltip-content {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}
/* Flèche : filet bleu encre extérieur + intérieur bleu pâle */
.info-tooltip-content::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 16px;
    border: 7px solid transparent;
    border-bottom-color: var(--color-help);
}
.info-tooltip-content::after {
    content: "";
    position: absolute;
    bottom: calc(100% - 1px);
    left: 17px;
    border: 6px solid transparent;
    border-bottom-color: var(--color-help-bg);
}

/* Cartes héros : ligne classe + pill côte-à-côte (Prompt 7c décision 7). */
.hero-class-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.hero-class-row .hero-class { margin: 0; }
.hero-class-row .hero-pill { align-self: center; }

/* Bannière unifiée (rectangle 2:1) — Maison + Clan.
   Trois tailles via classe modificateur ; les largeurs (84/132/270 px)
   sont conservées depuis l'ancienne version 3:1, les hauteurs ajustées
   au nouveau ratio 2:1. Voir BannerRenderer (frontend/js/banner_renderer.js). */
.banner {
    aspect-ratio: 2 / 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: 42px; }   /* largeur 84 px */
.banner.banner-md { height: 66px; }   /* largeur 132 px */
.banner.banner-lg { height: 135px; }  /* largeur 270 px */
.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: 2 / 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: 640px) {
    .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;
}

/* ── Cartes héros (Direction B Prompt 7b) ─────────────────────────
   Layout vertical : portrait 2:3 en haut, infos au milieu, boutons
   pleine largeur empilés en bas. Le portrait reçoit un filet or
   (effet médaillon). Mobile : grille recomposée (cf. @media 640). */

.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: var(--type-label-size);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--type-label-spacing);
}

.stat-value {
    font-size: var(--type-value-size);
    font-weight: 500;
    color: var(--color-accent);
}

/* Variantes contextuelles par stat (Direction B Prompt 7a). Scopage
   sous #family-view / #family-public-content pour battre la spécificité
   des règles d'ID qui surchargent .stat-value en --family-accent. */
#family-view .family-stats .stat-victories .stat-value,
#family-public-content .family-stats .stat-victories .stat-value {
    color: var(--color-success);
}
#family-view .family-stats .stat-losses .stat-value,
#family-public-content .family-stats .stat-losses .stat-value {
    color: var(--color-text-muted);
}

/* ── Cartes de héros (Direction B Prompt 7b) ──────────────────────
   Grille auto-fit : 3 cartes par ligne sur large desktop, replie
   automatiquement à 220px de min. align-items: stretch garantit
   que le slot vide a la même hauteur que ses voisines contenu. */
.general-slots {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    justify-content: start;
    gap: var(--space-4);
    align-items: stretch;
}

.general-slot {
    background-color: var(--color-bg-light);
    border: 2px solid var(--family-accent, var(--color-accent));  /* Prompt 7f Partie 2 : couleur d'accent Maison */
    border-radius: var(--radius);
    padding: var(--space-2) var(--space-3);  /* Prompt 7f Partie 3 : 8px vert / 12px horiz */
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Slot vide — bordure pointillée FINE et neutre, distincte des cartes
   pleines (qui sont en couleur d'accent 2px épais). Prompt 7f Partie 2. */
.general-slot--empty {
    border: 1px dashed var(--color-border);
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-text-muted);
    font-style: italic;
}

/* Portrait : ratio 2:3 vertical impératif (object-fit: cover, jamais
   de déformation), filet or 1px effet médaillon. Largeur 92% centrée
   (Prompt 7f Partie 3) — gain léger de hauteur + effet médaillon plus
   marqué. Mobile : override `width: 120px` + `aspect-ratio: auto` du
   bloc 640 reste prioritaire. */
.hero-portrait {
    aspect-ratio: 2 / 3;
    width: 92%;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid var(--color-gold);
    border-radius: var(--radius);
    background: var(--color-bg-secondary);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* État sans image — zone pointillée cliquable « Ajouter un portrait »
   (s'ouvre via openPortraitModal). */
.hero-portrait-add,
.hero-portrait--empty {
    border-style: dashed;
    border-color: var(--color-border);
    background: transparent;
    color: var(--color-text-muted);
    flex-direction: column;
    gap: var(--space-1);
    transition: border-color 120ms ease, color 120ms ease;
}
.hero-portrait-add {
    cursor: pointer;
}
.hero-portrait-add:hover,
.hero-portrait-add:focus-visible {
    border-color: var(--color-accent);
    color: var(--color-accent);
    outline: none;
}
.empty-portrait-icon {
    font-size: 2.5rem;
    line-height: 1;
}
.hero-portrait-add-label {
    font-size: 0.85rem;
    font-style: italic;
    text-align: center;
    padding: 0 var(--space-2);
}
.general-slot--empty .hero-portrait--empty {
    width: 60%;
}

/* Nom du héros — étend la classe modificateur --header du Prompt 7a
   (filet or 2px + souligné or) en variante --hero plus compacte. */
.general-slot .family-name-link--hero {
    font-size: 1.05rem;
    font-weight: 700;
    display: inline-block;
    align-self: flex-start;
    margin-top: var(--space-1);
}
.family-name-link .link-icon {
    font-size: 0.85em;
    margin-left: 2px;
    color: var(--color-gold);
}

/* Stack des infos centrales (pill, classe, infos partie ou stats).
   Permet de grouper en zone « infos » sur mobile via grid-area. */
.hero-infos-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Pills statut. Le style commun est dans .hero-pill ; chaque variante
   ne définit que background + color. */
.hero-pill {
    display: inline-block;
    align-self: flex-start;
    font-size: var(--type-label-size);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 11px;
    font-weight: 600;
}
.hero-pill--in-game {
    background: var(--color-gold);
    color: var(--color-text);
}
.hero-pill--available {
    background: var(--color-success);
    color: #fff;
}

/* Classe + emblème peuple (le span emblème n'est rendu qu'en IN_GAME,
   car le peuple est choisi au lancement de partie). */
.hero-class {
    font-size: 0.95rem;
    font-style: italic;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.peuple-emblem {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-style: normal;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    line-height: 1;
    flex-shrink: 0;
    color: #fff;  /* texte clair par défaut (couleurs REF_PEUPLE majoritairement sombres) */
}

/* Infos partie en cours (état IN_GAME). */
.hero-game-info {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--color-text);
}
.hero-game-info strong {
    display: block;
    color: var(--color-accent);
    font-weight: 600;
}
.hero-game-info small {
    display: block;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

/* Ligne stats V/D/Prestige (état AVAILABLE). */
.hero-stats-line {
    font-size: 0.9rem;
    color: var(--color-text);
}

/* Label du slot vide. */
.empty-slot-label {
    font-size: 0.95rem;
    font-style: italic;
    color: var(--color-text-muted);
}

/* Actions : boutons empilés pleine largeur en bas de la carte. */
.hero-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: auto;  /* pousse les boutons en bas — uniforme entre cartes */
}
.hero-actions:empty { display: none; }
.btn-block { width: 100%; }

.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;
}

/* Conteneurs de lignes — utilisés pour le layout mobile 2 lignes.
   Sur desktop, row1 (nom partie) reste tight et row2 (identité+meta)
   grandit pour pousser status+burger à droite. Cf. @media pour mobile. */
.game-topbar-row1,
.game-topbar-row2 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}
.game-topbar-row2 {
    flex: 1 1 auto;
    gap: 1rem;
}

/* Bloc identité : héros | classe | peuple (le nom de partie est désormais dans row1) */
.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;
}

/* Espacement entre l'icône et le label dans les badges peuple / saison
   (visible en desktop ; en mobile, le label disparaît cf. @media 640). */
.game-topbar-people .peuple-icon,
.game-season-badge  .season-icon {
    margin-right: 0.25rem;
}

/* Le contenu du tooltip d'aide hérite du `white-space: nowrap` de
   `.game-topbar-people` (header in-game) → le texte s'étalait sur une seule
   ligne (débordement par-dessus les onglets, max-width ignoré). On rétablit
   le wrap normal pour ce seul contexte ; les tooltips hors header
   (Découvertes, Explorations…) restent inchangés. */
.game-topbar .info-tooltip-content {
    white-space: normal;
}

/* Icône peuple cliquable → section de règles du peuple (game.js). */
.peuple-icon-link {
    text-decoration: none;
    cursor: pointer;
}
.peuple-icon-link:hover {
    filter: brightness(1.2);
}

.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);
}

/* Séparation visuelle entre onglets : trait vertical discret façon
   « livres en rayon » / registre. Scopé à .tab-bar pour ne pas
   impacter d'éventuels .tab-btn ailleurs (page Forum, etc.). */
.tab-bar > .tab-btn:not(:last-child) {
    border-right: 1px solid rgba(139, 31, 31, 0.15);
}

/* 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 (≤ 1024px) ────────────────── */
@media (max-width: 1024px) {
    /* 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 (Admin + Réglages + déconnexion) en bas du drawer.
       Le wrapper `.nav-account-stack` devient transparent (display:
       contents) pour empiler les 3 éléments directement dans
       .nav-actions en colonne pleine largeur (Prompt 7e). */
    .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-account-stack {
        display: contents;
    }

    .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; }

    .choice-grid    { grid-template-columns: 1fr; }
    .family-stats   { gap: 1rem; }

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

/* ── Cartes héros : layout mobile recomposé (Direction B Prompt 7b) ──
   Nom pleine largeur en haut, portrait à gauche + infos à droite,
   boutons sous infos dans la colonne droite. Le slot vide recouvre
   la grille via flex centré. */
@media (max-width: 640px) {
    .general-slots {
        grid-template-columns: 1fr;
    }
    .general-slot {
        display: grid;
        grid-template-columns: 120px 1fr;
        grid-template-areas:
            "name name"
            "portrait infos"
            "portrait actions";
        column-gap: var(--space-3);
        row-gap: var(--space-2);
        align-items: start;
    }
    .general-slot .family-name-link--hero { grid-area: name; }
    .general-slot .hero-portrait {
        grid-area: portrait;
        width: 120px;
        height: 100%;          /* étire à la hauteur de la rangée mobile (Prompt 7c #4) */
        align-self: stretch;
        aspect-ratio: auto;    /* annule le 2/3 strict pour cette instance — object-fit:cover centre */
    }
    .general-slot .hero-infos-stack { grid-area: infos; }
    .general-slot .hero-actions { grid-area: actions; margin-top: 0; }

    /* Slot vide : recouvre la grille, repasse en flex centré. */
    .general-slot--empty {
        display: flex;
        flex-direction: column;
    }
    .general-slot--empty .hero-portrait--empty { width: 60%; }
}

/* ── Surcharges mobile diverses (Prompt 7c — tooltip + annuaire) ── */
@media (max-width: 640px) {
    /* Tooltip mobile (Prompt 7h Partie 1) : position fixed centrée
       dans le viewport pour ne JAMAIS déborder de l'écran, peu importe
       où se trouve l'icône. La flèche pointeur disparaît (le tooltip
       n'est plus collé à l'icône). Toujours déclenché au survol/focus
       de l'icône comme sur desktop. */
    .info-tooltip-content {
        position: fixed;
        top: 50%;
        left: 16px;
        right: 16px;
        bottom: auto;
        transform: translateY(-50%);
        min-width: 0;
        max-width: none;
        width: auto;
        z-index: 1000;
    }
    /* Désactiver la flèche pointeur sur mobile (tooltip détaché de l'icône) */
    .info-tooltip-content::before,
    .info-tooltip-content::after {
        display: none;
    }
    /* Annuaire : bannière mini cohérente avec l'en-tête Maison mobile. */
    .annuaire-banner-cell .banner.banner-sm,
    .annuaire-banner-cell .banner.banner-md {
        width: 60px !important;
        height: 30px !important;
    }
    .annuaire-banner-cell { width: 76px; padding: 0.3rem 0.4rem; }
}

/* ── Pattern table → fiches Archives (CADRAGE_DESIGN.md §6) ───── */
@media (max-width: 640px) {
    /* Masquer l'entête de table : les libellés viennent en ::before */
    #archives-table thead, .archives-table--heroes thead { display: none; }

    /* Faire éclater la structure table → blocs */
    #archives-table, .archives-table--heroes,
    #archives-table tbody, .archives-table--heroes tbody,
    #archives-table tr, .archives-table--heroes tr,
    #archives-table td, .archives-table--heroes td {
        display: block;
        width: 100%;
    }

    /* Chaque ligne devient une carte fiche */
    #archives-table tr, .archives-table--heroes tr {
        background: var(--color-bg-light);
        border: 1px solid var(--color-border);
        border-radius: 6px;
        padding: 13px;
        margin-bottom: 10px;
    }

    #archives-table td, .archives-table--heroes td {
        padding: 2px 0;
        border: none;
    }

    /* Nom (col 1) — mise en avant bordeaux */
    #archives-table td:first-child, .archives-table--heroes td:first-child {
        font-size: 15px;
        font-weight: 500;
        color: var(--color-accent);
    }

    /* Classe (col 2) — italique brun, espacement vers le bas */
    #archives-table td:nth-child(2), .archives-table--heroes td:nth-child(2) {
        font-size: 12px;
        font-style: italic;
        color: var(--color-text-muted);
        margin-bottom: 8px;
    }

    /* Trio statut / V-D / prestige (col 3-4-5) — en ligne */
    #archives-table td:nth-child(3), .archives-table--heroes td:nth-child(3),
    #archives-table td:nth-child(4), .archives-table--heroes td:nth-child(4),
    #archives-table td:nth-child(5), .archives-table--heroes td:nth-child(5) {
        display: inline-block;
        width: auto;
        margin-right: 18px;
        vertical-align: top;
    }

    /* Libellé en label-petit-brun au-dessus de chaque valeur du trio */
    #archives-table td:nth-child(3)::before, .archives-table--heroes td:nth-child(3)::before {
        content: "Statut";
        display: block;
        font-size: 11px;
        letter-spacing: 0.09em;
        text-transform: uppercase;
        color: var(--color-text-muted);
    }
    #archives-table td:nth-child(4)::before, .archives-table--heroes td:nth-child(4)::before {
        content: "V / D";
        display: block;
        font-size: 11px;
        letter-spacing: 0.09em;
        text-transform: uppercase;
        color: var(--color-text-muted);
    }
    #archives-table td:nth-child(5)::before, .archives-table--heroes td:nth-child(5)::before {
        content: "Prestige";
        display: block;
        font-size: 11px;
        letter-spacing: 0.09em;
        text-transform: uppercase;
        color: var(--color-text-muted);
    }

    /* Prestige valeur — accent bordeaux comme dans les maquettes */
    #archives-table td:nth-child(5), .archives-table--heroes td:nth-child(5) {
        color: var(--color-accent);
        font-weight: 500;
    }
}

/* ── En-tête Maison : bannière mini mobile (Direction B Prompt 7a) ── */
@media (max-width: 640px) {
    /* Bannière en-tête réduite à 60×30 (ratio 2:1, largeur conservée
       depuis l'ancienne version 60×20 du Prompt 7a). Surcharge scopée à
       #family-banner-mount (Ma Maison) et .family-public-header
       (Famille publique) — les autres .banner.banner-sm du site (forum,
       annuaire, écran de jeu) restent à 42px. !important nécessaire :
       .banner.banner-sm impose 42px à portée globale. */
    #family-banner-mount .banner.banner-sm,
    .family-public-header > .banner.banner-sm {
        width: 60px !important;
        height: 30px !important;
    }
}

/* ── Drawer panneau jeu : styles par défaut (cachés en desktop) ── */
/* Les éléments suivants ne sont visibles qu'en ≤640 (cf. bloc média). */
.panel-burger,
.game-panel-close {
    display: none;
}
.game-panel-overlay {
    /* visibility + opacity (au lieu de display: none/block) pour préserver
       la transition d'opacité à l'ouverture comme à la fermeture. */
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 199;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 250ms ease, visibility 0s linear 250ms;
}
.game-panel-overlay.game-panel-overlay-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 250ms ease, visibility 0s linear 0s;
}
body.game-panel-locked { overflow: hidden; }

/* ── Responsive : mobile étroit (≤ 600px) ─────────────────────── */
@media (max-width: 640px) {
    /* Bouton 📜 Panneau visible uniquement en mobile (maquette
       2026-05-28). Désormais enfant direct de .tab-bar (cf. HTML) :
       absolu top:0/bottom:0 → épouse la hauteur des 2 lignes
       d'onglets. .tab-bar passe en position:relative ci-dessous. */
    .panel-burger {
        position: absolute;
        top: 0;
        right: 0.4rem;
        bottom: 0;            /* étire sur toute la hauteur de .tab-bar */
        z-index: 5;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        width: 44px;
        padding: 0;
        font-size: 1.4rem;
        line-height: 1;
        border-radius: var(--radius);
        /* Esprit « noble » : couleurs des info-bulles (bleu encre de scribe). */
        background-color: var(--color-help-bg);    /* bleu très pâle */
        color: var(--color-help);                  /* bleu encre (icône) */
        border: 1px solid var(--color-help-hover); /* bleu encre foncé (contour) */
        cursor: pointer;
        text-align: center;
    }
    .panel-burger:hover {
        background-color: var(--color-help);       /* fond bleu plein au survol */
        border-color: var(--color-help-hover);
        color: #fff;                               /* icône blanche au survol */
    }

    /* Ancre pour le burger absolu : le burger est enfant direct de
       .tab-bar pour épouser exactement la hauteur des 2 lignes
       d'onglets (top:0 / bottom:0).
       position: sticky (et non relative) épingle la barre d'onglets sous le
       topbar lors du scroll body, comme le header reste figé en desktop.
       sticky est aussi une valeur « positionnée » : le burger absolu reste
       donc ancré dessus. Le top empile la tab-bar SOUS la navbar + le topbar
       (hauteur variable du grid 2 lignes, exposée par game.js en
       --game-topbar-h). z-index 30 < topbar (31) : pas de chevauchement
       puisque les top diffèrent, mais le topbar reste prioritaire. */
    .tab-bar {
        position: sticky;
        top: calc(var(--navbar-h, 52px) + var(--game-topbar-h, 0px));
        z-index: 30;
        padding-right: 3.2rem;     /* place réservée au burger */
    }

    /* Drawer = position fixed à gauche, hors flow du .game-body.
       Le .game-central prend désormais toute la largeur du viewport.
       overflow: visible (et non auto) est REQUIS : un ancêtre scrollable
       capterait le sticky de la .tab-bar (son bloc englobant sticky
       deviendrait .game-body au lieu du viewport, cassant l'épinglage lors
       du scroll body). Le panneau gauche est en position:fixed (hors flow)
       et les contenus larges ont leurs propres wrappers à scroll horizontal,
       donc retirer l'ancien overflow-x:hidden n'introduit pas de scroll
       horizontal parasite. */
    .game-body {
        flex-direction: column;
        overflow: visible;
    }

    .game-panel {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 82%;
        max-width: 320px;
        padding: 3rem 1rem 1rem;
        background-color: var(--color-bg-secondary);
        border-right: 2px solid var(--color-border);
        border-bottom: none;
        box-shadow: 4px 0 16px rgba(0, 0, 0, 0.18);
        transform: translateX(-100%);
        transition: transform 280ms ease;
        z-index: 200;
        overflow-y: auto;
    }
    .game-panel.game-panel-open {
        transform: translateX(0);
    }
    .game-panel-close {
        display: block;
        position: absolute;
        top: 0.5rem;
        right: 0.75rem;
        background: transparent;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
        color: var(--color-text);
        padding: 0.2rem 0.5rem;
        line-height: 1;
    }
    .game-panel-close:hover { color: var(--color-accent); }

    .game-central { overflow: visible; width: 100%; }

    .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;
    }

    /* ── Topbar mobile : grid 2×2 (maquette 2026-05-28) ────────────
       Ligne 1 : nom partie (gauche)        | tour + saison + DFT (droite)
       Ligne 2 : héros + classe + peuple    | statut ordres (droite)
       Burger 📜 : hors topbar (cf. .panel-burger plus haut).

       On unwrap row1/row2 via `display: contents` pour que leurs
       enfants imbriqués deviennent directement des items de grid. */
    .game-topbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "name     meta"
            "identity status";
        gap: 0.4rem 0.75rem;
        padding: 0.5rem 0.75rem;
        font-size: 0.95rem;

        /* Sticky en haut comme sur desktop. En desktop le header reste figé
           car seul .tab-content-area scrolle (flex + scroll interne) ; en
           mobile c'est le body qui scrolle, donc on épingle explicitement
           le topbar sous la navbar (sticky top:0 z-index:100). Le fond +
           border-bottom sont hérités de la règle .game-topbar de base et
           masquent le contenu défilant dessous. */
        position: sticky;
        top: var(--navbar-h, 52px);
        z-index: 31;
    }
    .game-topbar-row1,
    .game-topbar-row2 {
        display: contents;
    }
    .game-topbar-name {
        grid-area: name;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .game-topbar-meta {
        grid-area: meta;
        gap: 0.4rem;
        flex-wrap: nowrap;
        justify-self: end;
    }
    .game-topbar-identity {
        grid-area: identity;
        gap: 0.4rem 0.6rem;
        margin-right: 0;           /* override desktop margin-right:auto */
        flex-wrap: nowrap;         /* override desktop flex-wrap:wrap — empêche
                                      l'icône peuple de basculer sous le nom héros
                                      tronqué (création d'une 3ᵉ ligne) */
        min-width: 0;
        overflow: hidden;
    }
    .game-topbar > .order-status {
        grid-area: status;
        justify-self: end;
        align-self: center;
    }

    /* Tronquage du nom du héros si trop long (ellipsis) */
    .game-topbar-hero {
        max-width: 9em;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
        vertical-align: bottom;
    }

    /* ── Allègement topbar mobile (chantier B+C) ───────────────────
       Classe du héros masquée (info reste accessible via Ma Maison),
       peuple/saison réduits à leur icône, préfixe DFT supprimé. */
    .game-topbar-class { display: none; }
    /* Pipes orphelins autour de la classe (héros|… et …|peuple) */
    .game-topbar-hero  + .game-topbar-sep { display: none; }
    .game-topbar-class + .game-topbar-sep { display: none; }

    .game-topbar-people .peuple-name { display: none; }
    .game-season-badge   .season-label { display: none; }
    .game-dft            .dft-label   { display: none; }

    .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; }

    /* ── Tab-bar mobile : compression pour tenir sur 2 lignes max.
       Padding et font-size réduits ; gap reste à 0 (le border-right
       sur .tab-btn:not(:last-child) sert de séparateur visuel). */
    .tab-bar { gap: 0; }
    .tab-btn {
        padding: 0.4rem 0.5rem;
        font-size: 0.82rem;
    }

    /* Section Construire mobile : wrapper nom adaptatif (occupe la place
       restante après stepper + coût). Rétrécit jusqu'à 0 si nécessaire
       pour éviter le débordement horizontal de la ligne. Le nom et le
       reason sont tronqués via ellipsis (déjà en place sur .option-name)
       ou via l'overflow:hidden du wrapper. */
    .option-item:has(.qty-ctrl-build) > .option-name-wrap {
        flex: 1 1 0;
        min-width: 0;
        width: auto;  /* override le width: 14rem desktop */
    }
    .option-item:has(.qty-ctrl-build) > .option-name-wrap > .option-reason-inline {
        font-size: 0.78rem;
    }

    /* Stats compressibles sur mobile : si la ligne déborde, elles
       peuvent rétrécir (avec ellipsis) au lieu de pousser le stepper
       hors de l'écran. NB : `.option-stats { display: none }` existe
       par ailleurs sur mobile (cf. règle générique plus bas) — cette
       règle reste utile si le display:none est levé un jour. */
    .option-item:has(.qty-ctrl-build) > .option-stats {
        flex-shrink: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Sécurité ultime : pas de débordement horizontal possible. */
    .option-item:has(.qty-ctrl-build) {
        overflow: hidden;
        max-width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════════
   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) ─────────── */
/* Pattern : <div class="table-responsive"><table>...</table></div>.
   Combiné avec un sticky CSS sur la 1ère colonne (cf. règles plus bas),
   permet sur mobile de scroller horizontalement pour voir toutes les
   colonnes en gardant le nom de l'item visible. */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
    /* Zone de garde après la dernière colonne : au scroll maximum, la
       dernière colonne reste entièrement visible avant que le gradient
       ::after (12px) ne commence. Évite le cut au milieu d'un header
       (ex: « NOURR. » coupé en « NOUR | R. »). */
    padding-right: 24px;
}
.table-responsive::after {
    /* Gradient discret (12px) indiquant qu'il y a du contenu à droite —
       activé sur mobile en permanence (cf. bloc 640). Combiné avec
       min-width sur les colonnes, ne coupe pas le contenu en plein mot. */
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 12px;
    height: 100%;
    background: linear-gradient(to left,
        var(--color-bg) 0%,
        rgba(248, 240, 224, 0) 100%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 200ms ease;
}

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

.game-table th,
.game-table td {
    /* Largeur minimale par colonne : garantit que le scroll horizontal
       révèle des cellules entières (pas de coupure au milieu d'un mot).
       Combiné avec le gradient ::after de .table-responsive, signale
       discrètement la scrollabilité sans masquer de contenu. */
    min-width: 70px;
}
.game-table th:first-child,
.game-table td:first-child {
    /* Nom de l'item : un peu plus large pour respirer. */
    min-width: 110px;
}

.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) {
    /* Couleur opaque (et non rgba) pour rester cohérent avec la 1ère
       colonne sticky (qui doit être opaque pour ne pas laisser passer
       le contenu défilant en arrière-plan). */
    background-color: rgb(238, 226, 207);
}

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

.game-table .text-right {
    /* Nom historique conservé pour ne pas toucher au JS ; l'alignement
       a été uniformisé sur `center` (standard UX tabulaire numérique). */
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Centrage de toutes les cellules SAUF la 1ère colonne (nom de l'item, qui
   reste aligné à gauche). Scopé à `.game-table` → n'affecte PAS `.report-table`
   (onglet Rapports reste à gauche, décision validée). Couvre aussi
   `.discoveries-table` qui hérite de la classe `game-table`. */
.game-table td:not(:first-child),
.game-table th:not(:first-child) {
    text-align: center;
}

/* ── Sticky 1ère colonne (.game-table + .discoveries-table) ─────
   Le wrapper .table-responsive fournit l'overflow-x: auto requis.
   Background opaque obligatoire sur les <th>/<td> figés pour ne pas
   laisser transparaître le contenu défilant en arrière-plan. */
.game-table thead th:first-child,
.discoveries-table thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background-color: var(--color-bg-secondary);
}
.game-table tbody td:first-child,
.discoveries-table tbody td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background-color: var(--color-bg);
}
/* Lignes paires : override nécessaire car un <td> sticky ne propage pas
   automatiquement le background du <tr> (rendu hors flow visuel). On
   réapplique la couleur opaque des lignes paires pour rester aligné
   avec le reste de la ligne. Couvre `.game-table` ET `.discoveries-table`
   — cette dernière hérite désormais aussi de la classe `game-table` en
   HTML (cf. _renderDiscoveriesTable, chantier 2026-06-01) ; on garde le
   double sélecteur pour la robustesse au cas où la dépendance serait
   changée plus tard. */
.game-table tbody tr:nth-child(even) td:first-child {
    background-color: rgb(238, 226, 207);
}

/* 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;
}

/* Layout flex de la ligne — scopé à la section Construire (les `.option-item`
   qui contiennent un `.qty-ctrl-build`). Les autres sections (Recherche, etc.)
   gardent leur layout d'origine via le `.option-btn` interne. Le sélecteur
   `:has(...)` est supporté par tous les navigateurs récents (Chrome 105+,
   Safari 15.4+, Firefox 121+). */
.option-item:has(.qty-ctrl-build) {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 0.7rem;
}

/* Coût poussé à droite, autres éléments fixés à gauche. */
.option-item:has(.qty-ctrl-build) > .option-cost { margin-left: auto; }
.option-item:has(.qty-ctrl-build) > .option-name-wrap,
.option-item:has(.qty-ctrl-build) > .qty-ctrl-build,
.option-item:has(.qty-ctrl-build) > .option-cost,
.option-item:has(.qty-ctrl-build) > .option-stats { flex-shrink: 0; }

/* Wrapper nom + reason : largeur fixe pour aligner verticalement les
   steppers, coûts et stats entre toutes les lignes de la section
   Construire. Le nom est tronqué avec ellipsis si trop long ; le
   reason inline reste lisible. */
.option-item:has(.qty-ctrl-build) > .option-name-wrap {
    width: 14rem;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    min-width: 0;
    overflow: hidden;
}
.option-item:has(.qty-ctrl-build) > .option-name-wrap > .option-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.option-item:has(.qty-ctrl-build) > .option-name-wrap > .option-reason-inline {
    font-size: 0.82rem;
    font-style: italic;
    color: var(--color-accent);
    flex-shrink: 0;
    white-space: nowrap;
}

/* Stepper BUILD : variante de `.qty-ctrl` hérite display:flex + gap.
   Le `.qty-display` au centre affiche la quantité commandée. */
.qty-ctrl-build .qty-display {
    min-width: 1.5rem;
    text-align: center;
    font-weight: 600;
    color: var(--color-accent);
}

.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);
}

/* Header de case : nom à gauche, coût à droite, sur la même ligne.
   Compresse la hauteur de la cell de 3 lignes à 2 (header + input). */
.troop-recruit-cell .troop-recruit-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
}

/* Nom dans le header : ellipsis si trop long, tooltip natif via title. */
.troop-recruit-cell .troop-recruit-header > .troop-recruit-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1 1 auto;
}

/* Coût : ne se rétracte pas (priorité visuelle, info critique). */
.troop-recruit-cell .troop-recruit-header > .troop-recruit-cost {
    flex-shrink: 0;
}

.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;
}

/* ── Section « Bâtiments absents » ─────────────────────────────
   Titre du <summary> en rouge, marker (triangle ▶) aussi.
   Fallback Safari : ::-webkit-details-marker (partiellement déprécié
   mais nécessaire sur Safari < 18). */
.troop-absent-title {
    color: var(--color-error);
    cursor: pointer;
}
.troop-absent-title::marker {
    color: var(--color-error);
}
.troop-absent-section summary::-webkit-details-marker {
    color: var(--color-error);
}

/* Tooltip ⓘ aligné après le label du summary. */
.troop-absent-title .info-tooltip {
    margin-left: 0.5rem;
    vertical-align: baseline;
}

/* Bordure gauche rouge sur les groupes absents (au lieu de l'accent
   bordeaux par défaut), pour cohérence visuelle avec le summary. */
.troop-group-absent .troop-group-title {
    border-left-color: var(--color-error);
}

/* Responsive : grille fluide auto-fit. Mobile permet 1-4 troupes par
   ligne via minmax(75px, 1fr) — sur iPhone SE (375px viewport), 4
   troupes tiennent confortablement à ~80px/cell ; sur Galaxy Fold
   (280px), descend automatiquement à 3 par ligne. */
@media (max-width: 640px) {
    .troop-recruit-grid {
        grid-template-columns: repeat(auto-fit, minmax(75px, 1fr));
        gap: 0.35rem;
    }
    .troop-recruit-cell {
        padding: 0.3rem 0.35rem;
        gap: 0.15rem;
    }
    .troop-recruit-name { font-size: 0.78rem; }
    .troop-recruit-cost { font-size: 0.68rem; }
    .troop-recruit-qty {
        min-height: 2rem;
        font-size: 0.85rem;
        padding: 0.2rem 0.15rem;
    }

    /* Mobile : repasser le header en bloc empilé (nom au-dessus, coût
       en dessous, input encore en dessous). Le format horizontal
       desktop tronque trop tôt les noms sur viewport étroit. */
    .troop-recruit-cell .troop-recruit-header {
        display: block;
    }
    /* Sécurité : neutralise les contraintes flex desktop sur le nom
       pour qu'il occupe 100 % de la cell, ellipsis seulement si
       vraiment trop long (cas extrême : « Maître-d'armes »). */
    .troop-recruit-cell .troop-recruit-header > .troop-recruit-name {
        flex: none;
        width: 100%;
    }
}

/* ── 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: 640px) {
    .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;
}

/* Cause racine du bug zebra (résolue 2026-06-01) :
   `.discoveries-table` portait `background: var(--color-bg-secondary)`
   sur le `<table>` lui-même, ce qui rendait les lignes impaires
   transparentes opaquement à `#E8DCC8` (brun clair). MAIS la
   cellule sticky de 1ère colonne (cf. règle l. 2979) force
   `background-color: var(--color-bg)` = `#F5F0E1` (parchemin).
   Résultat : mismatch visible sur les lignes impaires.

   Fix : retirer les overrides `background` / `border` / `border-radius`
   / `overflow` / `.discoveries-table th { background }` pour
   s'aligner intégralement sur `.game-table` (où le `<table>` est
   transparent et les lignes héritent du `.game-central` bg). */
.discoveries-table {
    /* Plus d'overrides cosmétiques : la double classe
       `game-table discoveries-table` hérite désormais entièrement
       de `.game-table`. Seules les règles spécifiques aux cellules
       bannière / contacter (ci-après) restent locales. */
    font-size: 0.94rem;   /* léger ajustement vs .game-table 0.92rem */
}

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

/* Zebra striping : la table porte désormais la double classe
   `game-table discoveries-table` (cf. _renderDiscoveriesTable, chantier
   2026-06-01) — elle hérite intégralement des règles `.game-table
   tbody tr:nth-child(even)` (l. 2950) et `:hover` (l. 2957) +
   l'override sticky 1ère colonne (l. 2992). Aucune règle locale
   spécifique nécessaire ici. */

.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: 18px;  /* ratio 2:1, largeur conservée depuis ancien 36×28 */
}
/* Ajustement #2 (2026-06-01) — bannières plus visibles dans le tableau
   Découvertes : ~64×32px au lieu de 36×18. Override scopé à
   `.discoveries-table` (PAS global) pour ne pas impacter les autres
   contextes qui utilisent .banner.banner-sm. */
.discoveries-table .discovery-banner-link .banner.banner-sm {
    width: 64px;
    height: 32px;
}

/* Cellule « Contacter » 🕊️ (chantier 2026-06-01) — bouton icône
   sobre, sans bordure, qui ouvre la modale pigeon par-dessus le jeu. */
.discoveries-table .discovery-contact-cell {
    width: 1%;
    text-align: center;
    padding: 0.3rem 0.5rem;
}
.discovery-contact-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1.15rem;
    padding: 0.2rem 0.4rem;
    border-radius: var(--radius);
    line-height: 1;
    transition: transform 0.1s ease, background-color 0.1s ease;
}
.discovery-contact-btn:hover {
    background-color: rgba(139, 31, 31, 0.08);
    transform: scale(1.15);
}
.discovery-contact-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Modale pigeon — lignes Expéditeur / Destinataire (ajustement #7,
   2026-06-01). Sobres, espacement compact. */
.pigeon-modal .pigeon-modal-identity {
    margin: 0.2rem 0;
    color: var(--color-text);
    font-size: 0.95rem;
}
.pigeon-modal .pigeon-modal-identity strong {
    font-weight: 600;
}
.pigeon-modal .pigeon-modal-identity .hint {
    color: var(--color-text-muted);
    font-weight: normal;
}

/* Section Exploration (refonte 2026-06-01) — mêmes utilisations
   que .commerce-recruit-caravane mais accessoirement avec align
   center plus rigoureux pour fixer le bug visuel de centrage des
   boutons relatif aux <input type="number"> (différence de hauteur
   intrinsèque entre les deux contrôles selon les navigateurs). */
.explore-section .commerce-rules,
.explore-section .caravane-recruit-form {
    margin-top: 0.4rem;
}
.caravane-recruit-form,
.explore-section .caravane-recruit-form {
    align-items: stretch;  /* harmonise les hauteurs input/bouton */
}
.caravane-recruit-form .qty-input,
.explore-section .qty-input,
.caravane-recruit-form .btn,
.explore-section .btn {
    /* Hauteur fluide commune (basée sur padding cohérent) :
       input et bouton se mettent à la même hauteur intrinsèque. */
    align-self: center;
}

/* ── 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); }

/* Couleurs thématiques des boutons d'action in-game (validé 2026-05-31).
   `color: #fff` est posé sur les classes elles-mêmes (et non plus
   uniquement sur `.discovery-actions button`) pour garantir le contraste
   sur tous les usages : Onglet Ordres (`.engagements-actions`), cartes
   Découvertes, etc.
   Hover/active conservés via `filter: brightness()` qui ne change pas
   la couleur du texte. */
.btn-action-attack,
.btn-action-defend,
.btn-action-spy,
.btn-action-gold,
.btn-action-indicate {
    color: #fff;
    border: none;
}
.btn-action-attack:hover,
.btn-action-defend:hover,
.btn-action-spy:hover,
.btn-action-gold:hover,
.btn-action-indicate:hover {
    color: #fff;        /* override .btn-ghost:hover et autres */
    filter: brightness(0.88);
}

.btn-action-attack  { background: #8B1A1A; }   /* Rouge foncé */
.btn-action-defend  { background: #1565C0; }   /* Bleu */
.btn-action-spy     { background: #6A1B9A; }   /* Violet — halo doré */
.btn-action-gold    { background: #9A6F00; }   /* Or / moutarde */
.btn-action-indicate { background: #4A7C59; }  /* Vert (mission Indiquer) */

/* Missionner mis en avant : padding +25%, font légèrement plus grosse,
   halo doré subtil (la mission est l'action distinctive du tour). */
.btn-action-spy {
    padding: 0.5rem 1rem;
    font-size: 0.95rem;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.4);
}
.btn-action-spy:hover {
    box-shadow: 0 0 14px rgba(255, 215, 0, 0.55);
}

.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); }

/* Bouton « entrée » (rejoindre / s'inscrire) — vert parchemin. Calqué sur
   .btn-danger. Logique d'action : entrée = vert, sortie = rouge. */
.btn-success {
    background-color: var(--color-success);   /* #4A7C59 vert parchemin */
    color: #fff;
    border: 1px solid var(--color-success);
    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-success:hover { filter: brightness(0.9); }

/* Boutons de sortie sur les fiches héros (Abandonner / Se désinscrire /
   Révoquer) : rouge FIXE de l'accent (`--color-accent`, #8B1A1A) plutôt que
   le rouge vif d'erreur — esprit parchemin. Valeur fixe (pas `--family-accent`)
   pour rester constante quel que soit l'accent personnalisé de la Maison.
   Scopé à `.hero-actions` pour ne pas modifier les autres `.btn-danger`
   (admin, etc.). Le hover hérite du `filter: brightness` de `.btn-danger`. */
.hero-actions .btn-danger {
    background: var(--color-accent);
    border-color: var(--color-accent);
}

.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; }

/* D4 (2026-05-12) — bloc statut + recrutement Caravane */
/* 5a : compteurs sur une seule ligne */
.commerce-counters {
    margin: 0.4rem 0 0.75rem;
    font-size: 0.95rem;
}

/* Section recrutement Caravane (corrigée 2026-05-12) */
.commerce-recruit-caravane {
    margin: 0.75rem 0 1rem;
}
.caravane-recruit-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.4rem;
}
.caravane-recruit-form .qty-input {
    width: 4.5rem;
}
/* 5e : coût "5 or" en petit, aligné sur Troupes/Recruter */
.caravane-recruit-cost {
    font-size: 0.85em;
    color: var(--color-text-muted);
    margin-left: 0.25rem;
}

/* B/C/D6 (2026-05-12) — lien cliquable dans sections vides */
.empty-tab-link {
    color: var(--color-accent, var(--color-link, #7a5));
    text-decoration: underline;
    cursor: pointer;
    margin-left: 0.4rem;
}
.empty-tab-link:hover { opacity: 0.8; }

.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: 640px) {
    /* Indicateur visuel permanent de scrollabilité sur mobile.
       (Les tables peuvent être scrollées horizontalement pour voir
       toutes les colonnes — cf. .table-responsive + sticky 1ère col.) */
    .table-responsive::after {
        opacity: 1;
    }

    .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; }

/* Variante cliquable des cartes Vue d'ensemble (chantier 2026-05-31).
   `archipel-card` est désormais rendu en `<a>` pour pointer vers
   `#parties[?filter=...]`. On retire la déco soulignée et on garde la
   couleur de texte normale, plus un léger effet hover. */
a.archipel-card,
a.archipel-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
a.archipel-card-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}

/* Lien Place Publique sur le détail Conquête : visuel sobre + souligné
   discret pour signaler l'action. */
.parties-pp-link {
    font-style: italic;
    color: var(--color-accent);
    text-decoration: underline;
}
.parties-pp-link:hover { filter: brightness(0.85); }

/* Lignes du tableau « Parties » : pointer sur survol pour signifier
   que toute la ligne (via le lien Nom) renvoie au détail. */
.parties-row td { padding-top: 0.45rem; padding-bottom: 0.45rem; }
.parties-row:hover { background: rgba(0, 0, 0, 0.03); }

/* Cellule « Peuple » : on rend l'icône et le nom comme 2 spans
   séparés pour pouvoir masquer le nom en mobile (gain de largeur
   notable sur les tables 6 colonnes des Conquêtes). Cf. chantier
   UI 2026-05-31, ajustement #3. */
@media (max-width: 640px) {
    .people-name { display: none; }
}

/* ── 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;
}

/* ── Pagination Règles (Précédent / Suivant) ─────────────────────── */
/* Barre en bas de chaque page : navigation séquentielle entre pages
   sans repasser par le sommaire. Filet or fin au-dessus pour cohérence
   Direction B. Layout flex space-between desktop, colonne mobile. */
.rules-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-gold);
}
.rules-pagination-spacer {
    /* Conserve l'alignement space-between quand un seul bouton est
       présent (1ère/dernière page). */
    flex: 0 0 auto;
}
.rules-pagination-btn {
    /* Cible tactile confortable, légèrement plus grande que .btn-sm
       par défaut sur mobile. */
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* Bouton central « ← Retour » (history.back) : même gabarit que les boutons
   Préc/Suiv mais teinte neutre + bordure pointillée pour le distinguer. */
.rules-back-history-btn {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-secondary);
    color: var(--color-text);
    border: 1px dashed var(--color-border);
}
.rules-back-history-btn:hover {
    background: var(--color-border);
}

/* ── Responsive : ≤ 1024px → drawer Règles ──────────────────── */
@media (max-width: 1024px) {
    .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;       /* fallback navigateurs sans dvh */
        height: 100dvh;      /* dvh = dynamic viewport height : exclut le chrome
                                mobile (barre d'URL) → le bas du drawer reste
                                dans la zone visible */
        max-height: 100vh;   /* fallback */
        max-height: 100dvh;
        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;
        /* Colonne flex : en-tête figé (✕ / Retour / titre) + nav scrollable.
           Sans ça, le contenu tient dans la hauteur du drawer sans déclencher
           l'overflow et les dernières sections (Sauvageons) restaient
           inaccessibles au scroll. */
        display: flex;
        flex-direction: column;
    }
    /* En-tête du drawer : ne pas compresser. Le ✕ est en position:absolute
       (hors flux) donc non concerné par le flex. */
    .rules-toc .page-back-btn,
    .rules-toc-title {
        flex-shrink: 0;
    }
    .rules-toc-nav {
        flex: 1;
        min-height: 0;       /* autorise le shrink sous la hauteur du contenu */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .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;
    }
}

/* ── Responsive : ≤ 640px → pagination Règles empilée ──────── */
@media (max-width: 640px) {
    .rules-pagination {
        flex-direction: column;
        gap: 0.6rem;
        align-items: stretch;       /* boutons pleine largeur */
    }
    .rules-pagination-btn,
    .rules-back-history-btn {
        min-height: 44px;           /* cible tactile recommandée iOS */
        width: 100%;
    }
    /* Spacer masqué sur mobile (ne sert plus à conserver l'alignement
       quand on est en colonne et que tout est pleine largeur). */
    .rules-pagination-spacer {
        display: none;
    }
}


/* ═════════════════════════════════════════════════════════════════
   ── 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;
}

/* Code couleur des bulles (chantier 2026-06-01, sujet 3) — distingue
   visuellement les messages du joueur (Maison `viewer_family_id`) de
   ceux de l'interlocuteur. Couleurs cohérentes avec la palette
   parchemin/médiéval : crème sombre côté "moi", brun chaud côté "lui". */
.pigeonnier-msg.pigeonnier-msg-mine {
    background: #F1E7D1;             /* crème clair — moi */
    border-left: 3px solid var(--color-accent, #8B1A1A);
}
.pigeonnier-msg.pigeonnier-msg-theirs {
    background: var(--color-bg-secondary);  /* brun clair — l'autre */
    border-left: 3px solid #78350F;  /* brun médiéval */
}

/* Lien cliquable « nom de héros → retour partie » (sujet 2) — souligné
   discret + couleur accent, pour rester sobre dans les en-têtes de bulles. */
.pigeonnier-game-link {
    color: var(--color-accent, #8B1A1A);
    text-decoration: none;
    border-bottom: 1px dotted var(--color-accent, #8B1A1A);
}
.pigeonnier-game-link:hover {
    text-decoration: none;
    border-bottom-style: solid;
    filter: brightness(0.85);
}

/* 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 bannière (Prompt 7c+annuaire fix) : ramener à la taille
   standard sm (84×42, ratio 2:1) pour ne pas faire grossir les lignes.
   La cellule est resserrée en conséquence. Le JS annuaire.js passe
   actuellement `size: "md"` au renderer — la surcharge ci-dessous force
   les dimensions sm visuellement, indépendamment de la classe passée. */
.annuaire-banner-cell { width: 100px; padding: 0.4rem 0.5rem; }
.annuaire-banner-cell .banner.banner-sm,
.annuaire-banner-cell .banner.banner-md { width: 84px; height: 42px; }
.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: 1024px) {
    .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: 640px) {
    .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-row.is-unread { font-weight: 600; }
.forum-thread-icons {
    font-size: 1rem;
    line-height: 1;
}
/* Pastille rouge per-thread (A2 N3) — messages non lus par le viewer. */
.forum-thread-unread-dot {
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: #c0392b;
    vertical-align: middle;
    margin-right: 0.25rem;
    box-shadow: 0 0 0 1px rgba(192, 57, 43, 0.25);
}
.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: 640px) {
    .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 ────── */

/* ── Champ mot de passe avec bouton œil (afficher/masquer) ──────────
   Utilisé sur la page de création de compte (#register-form). Le
   wrapper devient l'élément flex du formulaire ; l'input prend toute
   la largeur et réserve de la place à droite pour l'œil. */
.password-field-wrapper {
    position: relative;
    display: block;
}
.password-field-wrapper input {
    width: 100%;
    /* place réservée à droite pour le bouton œil (sans chevaucher le texte) */
    padding-right: 2.5rem;
}
.password-toggle {
    position: absolute;
    top: 50%;
    right: 0.45rem;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0.2rem;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}
.password-toggle:hover {
    opacity: 1;
}
.password-toggle:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 4px;
    opacity: 1;
}

.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);
}