:root {
    --dnd-bg-1: #2A2015;
    --dnd-bg-2: #14110F;
    --dnd-bg-3: #0C0A08;
    --dnd-panel-1: #1F1A15;
    --dnd-panel-2: #17130F;
    --dnd-border: #3A3226;
    --dnd-border-strong: #6B5C42;
    --dnd-ink: #EDE3C8;
    --dnd-ink-dim: #A99B7A;
    --dnd-ink-faint: #8C7C5C;
    --dnd-label-gold: #B08D3A;
    --dnd-gold: #C9A227;
    --dnd-gold-bright: #E8C468;
    --dnd-green: #3E6B4F;
    --dnd-red: #8A2A2A;
    --dnd-blue: #3E5A6B;
    --dnd-green-text: #6FAF87;
    --dnd-red-text: #D07A72;
    --dnd-blue-text: #7FA8BF;
    --dnd-body-copy: #D8CCA8;

    /* Hauteur de .tavern-topnav (NavMenu.razor.css), sticky en haut de toutes les pages
       authentifiees : sert de decalage aux autres barres collantes pour qu'elles ne se glissent
       pas dessous. Mesuree dans le navigateur : 65,5px a 1280px, 73px a 375px (la barre est en
       flex-wrap, sa hauteur depend de la largeur) - arrondi au pixel superieur. */
    --dnd-topnav-height: 66px;

    /* Hauteur de .tavern-campaign-nav (CampaignTabNav.razor.css), sticky juste sous
       .tavern-topnav sur les 5 ecrans d'une campagne (fiche, Combat, Grimoire, Cartes,
       Notes MJ) : sert de decalage aux barres collantes propres a chaque ecran (voir
       .tavern-combat-active-bar plus bas, .gm-frame dans GmNotesPage.razor.css). Mesuree dans le
       navigateur a 1280px : 73,5px - arrondi au pixel superieur, meme convention que
       --dnd-topnav-height ci-dessus. */
    --dnd-campaign-nav-height: 74px;

    color-scheme: dark;
    scrollbar-color: var(--dnd-border) transparent;
    scrollbar-width: thin;
}

/* Sous 860px, .tavern-topnav bascule en mode mobile (NavMenu.razor.css:106) et gagne en hauteur :
   mesuree a 73px a 375px contre 65,5px a 1280px. */
@media (max-width: 860px) {
    :root {
        --dnd-topnav-height: 74px;
    }
}

:where(button, a, [tabindex], input, select, textarea):focus-visible {
    outline: 2px solid var(--dnd-gold-bright);
    outline-offset: 2px;
    border-radius: 4px;
}

html {
    /* Défilement fluide pour les ancres (ex. sommaire du GrimoireReader) quand la fenêtre
       elle-même est le conteneur défilant (mobile, où le panneau n'a pas de hauteur fixe). */
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    :where(a, button, .tavern-content-card-clickable, .tavern-search-result, .btn) {
        transition: none !important;
    }

    /* La ligne du combattant actif garde son liseré doré, mais n'arrive plus en glissant et n'est
       plus balayée : la couleur suffit à la désigner. */
    .tavern-combat-row.active {
        animation: none;
    }

    .tavern-combat-row.active::after {
        content: none;
    }
}

:where(a, button, .tavern-content-card-clickable, .tavern-search-result, .btn) {
    transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}

html, body {
    background: radial-gradient(ellipse at 50% -10%, var(--dnd-bg-1) 0%, var(--dnd-bg-2) 45%, var(--dnd-bg-3) 100%);
    background-attachment: fixed;
    color: var(--dnd-ink);
    font-family: 'EB Garamond', Georgia, serif;
    min-height: 100dvh;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Cinzel', serif;
    font-weight: 500;
    color: var(--dnd-ink);
    letter-spacing: 0.3px;
}

p {
    color: var(--dnd-body-copy);
}

a, .btn-link {
    color: var(--dnd-gold-bright);
    text-decoration: none;
}

/* N'existe ni dans le thème ni dans Bootstrap (l'utilitaire s'appelle .min-w-0, absent de la
   version embarquée) : nécessaire pour que les libellés longs se tronquent au lieu de pousser
   le contenu adjacent hors de la ligne dans un conteneur flex/grid. */
.min-width-0 {
    min-width: 0;
}

a:hover, .btn-link:hover {
    color: var(--dnd-gold);
}

/* Petit intitule Cinzel majuscule espace, au-dessus des titres de section */
.tavern-eyebrow {
    font-family: 'Cinzel', serif;
    font-size: 11px;
    letter-spacing: 0.3em;
    color: var(--dnd-label-gold);
    margin-bottom: 8px;
}

/* Panneau eleve generique (equivalent visuel de .card, utilisable hors contexte carte) */
.tavern-panel {
    background: linear-gradient(180deg, var(--dnd-panel-1) 0%, var(--dnd-panel-2) 100%);
    border: 1px solid var(--dnd-border);
    border-radius: 12px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
}

/* Habillage commun aux ecrans hors session (connexion, inscription, mot de passe oublie). Global
   et non scope a Login.razor : ces ecrans doivent etre indiscernables les uns des autres, l'invite
   ou la personne qui a perdu son mot de passe arrivant par un lien recu par message. Une page qui
   ne ressemblerait pas au site serait indiscernable d'une page d'hameconnage. */
.tavern-login {
    width: 100%;
    max-width: 400px;
    position: relative;
}

.tavern-login-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;
}

/* Meme montage que .tavern-loading-logo : disque noir, halo dore diffus au lieu d'un cerclage, et
   l'image rognee a la forme du disque. Le halo est un peu plus large ici, a la mesure des 72px. */
.tavern-login-logo {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    margin-bottom: 16px;
    position: relative;
    background: #000;
    box-shadow: 0 0 0 1px rgba(201, 162, 39, 0.16), 0 0 18px rgba(201, 162, 39, 0.22), 0 0 44px rgba(201, 162, 39, 0.1);
    display: grid;
    place-items: center;
    overflow: hidden;
}

.tavern-login-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tavern-login-header h1 {
    font-size: 26px;
    margin: 0;
    text-align: center;
}

.tavern-login-panel {
    padding: 30px 30px 26px;
}

/* Liens secondaires sous le bouton principal (« Mot de passe oublie ? », « Retour a la
   connexion ») : discrets, ils ne doivent pas concurrencer l'action principale du formulaire. */
.tavern-login-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    font-size: 13px;
}

.tavern-pill {
    font-family: 'Cinzel', serif;
    font-size: 11px;
    letter-spacing: 0.06em;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--dnd-border);
    color: var(--dnd-ink);
}

.tavern-dashed {
    border-top: 1px dashed var(--dnd-border);
}

/* Pastille d'etat (Paralyse, Empoisonne...), partagee entre la fiche de personnage et la fiche de
   combat : les deux listent le meme vocabulaire (CharacterConditions), elles doivent le montrer
   pareil. Cliquable des deux cotes, d'ou le bouton plutot que le simple .tavern-pill. */
.tavern-condition-chip {
    font-family: 'Cinzel', serif;
    font-size: 11px;
    letter-spacing: 0.02em;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--dnd-border);
    background: transparent;
    color: var(--dnd-ink-dim);
    cursor: pointer;
}

.tavern-condition-chip.active {
    border-color: var(--dnd-red);
    background: rgba(138, 42, 42, 0.15);
    color: var(--dnd-ink);
}

.tavern-condition-chip:disabled {
    cursor: default;
    opacity: 0.6;
}

/* Bouton pill "retour" reutilise en tete des ecrans Campagne et Combat */
.tavern-back-btn {
    display: inline-block;
    font-family: 'Cinzel', serif;
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--dnd-ink);
    background: rgba(20, 17, 15, 0.7);
    border: 1px solid var(--dnd-border);
    border-radius: 999px;
    padding: 8px 14px;
    cursor: pointer;
}

.card {
    background: linear-gradient(180deg, var(--dnd-panel-1) 0%, var(--dnd-panel-2) 100%);
    border: 1px solid var(--dnd-border);
    border-radius: 12px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
    color: var(--dnd-ink);
}

.card-footer {
    background-color: transparent;
    border-top: 1px dashed var(--dnd-border);
}

.btn {
    font-family: 'Cinzel', serif;
    font-size: 12px;
    letter-spacing: 0.08em;
    border-radius: 8px;
}

.btn-primary {
    background: linear-gradient(180deg, var(--dnd-gold-bright) 0%, var(--dnd-gold) 100%);
    border-color: var(--dnd-gold);
    color: var(--dnd-bg-2);
    box-shadow: 0 10px 26px rgba(201, 162, 39, 0.32);
}

.btn-primary:hover, .btn-primary:focus {
    background: linear-gradient(180deg, var(--dnd-gold-bright) 0%, var(--dnd-gold-bright) 100%);
    border-color: var(--dnd-gold-bright);
    color: var(--dnd-bg-2);
}

.btn-outline-primary {
    color: var(--dnd-gold-bright);
    border-color: var(--dnd-gold);
    background-color: rgba(201, 162, 39, 0.13);
}

.btn-outline-primary:hover {
    background-color: var(--dnd-gold);
    border-color: var(--dnd-gold);
    color: var(--dnd-bg-2);
}

.btn-outline-secondary {
    color: var(--dnd-ink-dim);
    border-color: var(--dnd-border);
    background-color: transparent;
}

.btn-outline-secondary:hover {
    background-color: rgba(58, 50, 38, 0.5);
    border-color: var(--dnd-border);
    color: var(--dnd-ink);
}

.btn-outline-danger {
    color: var(--dnd-ink);
    border-color: var(--dnd-red);
    background-color: rgba(138, 42, 42, 0.13);
}

.btn-outline-danger:hover {
    background-color: var(--dnd-red);
    border-color: var(--dnd-red);
    color: var(--dnd-ink);
}

.badge.text-bg-secondary {
    background-color: rgba(201, 162, 39, 0.12) !important;
    color: var(--dnd-ink) !important;
    border: 1px solid var(--dnd-gold);
    font-family: 'Cinzel', serif;
    font-weight: 400;
}

.badge.text-bg-light {
    background-color: transparent !important;
    color: var(--dnd-ink-dim) !important;
    border: 1px solid var(--dnd-border);
    font-family: 'Cinzel', serif;
    font-weight: 400;
}

.alert {
    background: linear-gradient(180deg, var(--dnd-panel-1) 0%, var(--dnd-panel-2) 100%);
    border: 1px solid var(--dnd-border);
    color: var(--dnd-ink);
}

.alert-warning {
    border-color: var(--dnd-gold);
}

.alert-danger {
    border-color: var(--dnd-red);
}

.alert-success {
    border-color: var(--dnd-green-text);
}

.table {
    color: var(--dnd-ink);
    --bs-table-bg: transparent;
}

.table thead {
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: var(--dnd-label-gold);
}

.table > :not(caption) > * > * {
    border-bottom-color: var(--dnd-border);
    background-color: transparent;
    color: var(--dnd-ink);
}

.form-control, .form-select {
    background-color: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--dnd-border-strong);
    color: var(--dnd-ink);
    border-radius: 7px;
}

.form-control::placeholder {
    color: var(--dnd-ink-faint);
}

.form-control:focus, .form-select:focus {
    background-color: rgba(0, 0, 0, 0.3);
    border-color: var(--dnd-gold);
    color: var(--dnd-ink);
    box-shadow: 0 0 0 0.2rem rgba(201, 162, 39, 0.15);
}

.form-select option {
    background-color: var(--dnd-panel-1);
    color: var(--dnd-ink);
}

.form-label {
    font-family: 'Cinzel', serif;
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--dnd-label-gold);
}

.form-check-input {
    accent-color: var(--dnd-gold);
    border-color: var(--dnd-border);
    background-color: rgba(0, 0, 0, 0.25);
}

.text-secondary {
    color: var(--dnd-ink-dim) !important;
}

.text-danger {
    color: #C97A6B !important;
}

/* Tuiles de statistiques (caracteristiques, combat) */
.stat-tile {
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--dnd-border) !important;
    border-radius: 8px;
}

.stat-tile-hp, .stat-tile-ac, .stat-tile-initiative, .stat-tile-speed {
    border-radius: 8px;
    color: var(--dnd-ink);
}

.stat-tile-hp {
    background-color: rgba(138, 42, 42, 0.16);
    border: 1px solid var(--dnd-red) !important;
}

.stat-tile-ac {
    background-color: rgba(62, 107, 79, 0.16);
    border: 1px solid var(--dnd-green) !important;
}

.stat-tile-initiative {
    background-color: rgba(62, 90, 107, 0.16);
    border: 1px solid var(--dnd-blue) !important;
}

.stat-tile-speed {
    background-color: rgba(201, 162, 39, 0.13);
    border: 1px solid var(--dnd-gold) !important;
}

/* Grilles/cartes reutilisees par les onglets de contenu de campagne (PNJ, bestiaire,
   commercants, lieux, quetes) */
.tavern-add-form {
    padding: 16px 18px;
}

.tavern-add-form-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: flex-end;
}

.tavern-add-form-field {
    flex: 1 1 160px;
}

.tavern-add-form-field-narrow {
    flex: 0 1 150px;
}

.tavern-content-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

.tavern-content-card {
    padding: 18px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.tavern-content-name {
    font-family: 'Cinzel', serif;
    font-size: 14px;
    color: var(--dnd-ink);
}

.tavern-content-sub {
    font-size: 12px;
    color: var(--dnd-label-gold);
    margin-bottom: 6px;
}

.tavern-content-note {
    font-size: 13px;
    color: var(--dnd-ink-dim);
    line-height: 1.4;
    white-space: pre-wrap;
}

.tavern-content-card-clickable {
    cursor: pointer;
}

.tavern-content-card-clickable:hover {
    border-color: var(--dnd-gold);
}

/* ---------------------------------------------------------------------------------------------
   Carte de figure : une entite de campagne dont l'illustration est l'information principale.
   Partagee par le bestiaire et les PNJ, d'ou sa place ici plutot que dans le CSS scope de l'un des
   deux onglets. Ce qui reste propre a chacun (barre de filtres du bestiaire, disposition du PNJ)
   vit dans son composant.
   --------------------------------------------------------------------------------------------- */

/* Colonnes plus larges que celles des autres onglets : l'illustration est ici l'information
   principale, et une pastille de 44 px ne laissait pas reconnaitre la creature. */
.tavern-figure-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

/* Reference de positionnement de toute la carte : les pastilles, le bouton « retirer » et la zone
   cliquable du nom s'y accrochent. */
.tavern-figure-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.tavern-figure-card:hover,
.tavern-figure-card:focus-within {
    border-color: var(--dnd-gold);
    transform: translateY(-2px);
}

/* Grille a une seule cellule plutot qu'un empilement en position: absolute : l'illustration et le
   bandeau du nom se superposent sans que le media devienne le repere des pastilles. */
.tavern-figure-media {
    position: relative;
    aspect-ratio: 4 / 3;
    display: grid;
    /* minmax(0, 1fr) et non 1fr : une piste 1fr garde un minimum automatique, et le bandeau du nom
       y imposerait sa hauteur avant que aspect-ratio ne s'applique. */
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
    background: radial-gradient(circle at 50% 35%, rgba(201, 162, 39, 0.08) 0%, var(--dnd-bg-2) 70%);
    overflow: hidden;
}

.tavern-figure-media > * {
    grid-area: 1 / 1;
    min-width: 0;
    min-height: 0;
}

/* Sortie du flux de la grille plutot que dimensionnee en pourcentage : une illustration carree de
   600 px etirait sinon le cadre au format de l'image, et le cadrage 4/3 sautait des qu'elle
   finissait de charger. */
.tavern-figure-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.tavern-figure-card:hover .tavern-figure-media img {
    transform: scale(1.05);
}

.tavern-figure-initial {
    place-self: center;
    font-family: 'Cinzel', serif;
    font-size: 52px;
    color: var(--dnd-ink-faint);
}

/* Le degrade fait office de fond du bandeau : il pose le nom sur l'illustration sans le rendre
   illisible sur une figure claire, et evite un element supplementaire juste pour l'ombrage. */
/* Positionne pour repasser au-dessus de l'illustration, qui est elle-meme en position: absolute. */
.tavern-figure-heading {
    position: relative;
    z-index: 1;
    align-self: end;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 34px 12px 10px;
    background: linear-gradient(180deg, rgba(12, 10, 8, 0) 0%, rgba(12, 10, 8, 0.82) 60%, rgba(12, 10, 8, 0.95) 100%);
}

/* Le bouton porte le nom et s'etend sur toute la carte par son pseudo-element : une seule cible
   cliquable pleine taille, focalisable au clavier, sans imbriquer le bouton « retirer ». */
.tavern-figure-open {
    background: none;
    border: none;
    padding: 0;
    text-align: left;
    font-family: 'Cinzel', serif;
    font-size: 15px;
    line-height: 1.25;
    color: var(--dnd-ink);
    cursor: pointer;
}

.tavern-figure-open::after {
    content: '';
    position: absolute;
    inset: 0;
}

.tavern-figure-open:hover,
.tavern-figure-card:focus-within .tavern-figure-open {
    color: var(--dnd-gold-bright);
}

.tavern-figure-sub {
    font-size: 12px;
    color: var(--dnd-label-gold);
}

.tavern-figure-badge,
.tavern-figure-flag {
    position: absolute;
    top: 8px;
    padding: 3px 9px;
    border-radius: 999px;
    font-family: 'Cinzel', serif;
    font-size: 11px;
    letter-spacing: 0.04em;
    background: rgba(12, 10, 8, 0.72);
    border: 1px solid var(--dnd-border-strong);
}

.tavern-figure-badge {
    left: 8px;
    color: var(--dnd-gold-bright);
}

.tavern-figure-flag {
    right: 8px;
    color: var(--dnd-ink-dim);
}

/* Le bouton « retirer » passe au-dessus de la zone cliquable du nom, et se place en bas de carte :
   en haut il aurait recouvert l'illustration et se serait trouve sous le doigt au moment d'ouvrir
   la fiche sur mobile. */
.tavern-figure-remove {
    position: absolute;
    z-index: 1;
    bottom: 4px;
    right: 6px;
    background: none;
    border: none;
    padding: 4px 6px;
    font-size: 13px;
    line-height: 1;
    color: var(--dnd-ink-faint);
    cursor: pointer;
}

.tavern-figure-remove:hover {
    color: var(--dnd-red-text);
}

.tavern-figure-note {
    margin: 0;
    padding: 10px 12px 24px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--dnd-ink-dim);
    /* Les notes de MJ vont de trois mots a un paragraphe : les tronquer garde une grille alignee,
       la note entiere restant a un clic sur la fiche. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .tavern-figure-card,
    .tavern-figure-media img {
        transition: none;
    }

    .tavern-figure-card:hover,
    .tavern-figure-card:focus-within,
    .tavern-figure-card:hover .tavern-figure-media img {
        transform: none;
    }
}

/* Fiche de figure : la modale de consultation d'une creature ou d'un PNJ, meme en-tete
   illustre. Partagee pour la meme raison que la carte ci-dessus. */
/* La fiche defile elle-meme. Sans hauteur maximale, un bloc de statistiques complet la faisait
   depasser sous le bas de l'ecran : le fond de modale etant en position: fixed, la page ne
   defilait pas et le bouton « Enregistrer » du formulaire restait hors d'atteinte. Les 160 px
   retranches sont les marges haute et basse du fond de modale. */
.tavern-figure-sheet {
    max-height: calc(100vh - 160px);
    overflow-y: auto;
}

.tavern-figure-hero {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) auto;
    align-items: start;
    gap: 16px;
}

/* Positionne : ImagePickerOverlay est en position: absolute et se dimensionne sur son premier
   ancetre positionne (voir le contrat en tete de ImagePickerOverlay.razor.css). */
.tavern-figure-hero-image {
    position: relative;
    aspect-ratio: 1 / 1;
    display: grid;
    /* minmax(0, 1fr) : sans cela une illustration plus haute que large imposerait sa hauteur au
       cadre et le carre annonce par aspect-ratio ne tiendrait pas. */
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
    place-items: center;
    border-radius: 12px;
    border: 1px solid var(--dnd-border);
    background: radial-gradient(circle at 50% 35%, rgba(201, 162, 39, 0.1) 0%, var(--dnd-bg-2) 72%);
    overflow: hidden;
}

/* Sortie du flux : dimensionnee en pourcentage, une illustration plus haute que large imposait sa
   hauteur au cadre et le carre annonce par aspect-ratio ne tenait pas. */
.tavern-figure-hero-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tavern-figure-hero-initial {
    font-family: 'Cinzel', serif;
    font-size: 64px;
    color: var(--dnd-ink-faint);
}

.tavern-figure-hero-identity {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 4px;
}

.tavern-figure-hero-identity .tavern-content-name {
    font-size: 20px;
}

.tavern-figure-hero-close {
    justify-self: end;
}

/* Regroupe le bouton « nouvel onglet » et « Fermer » dans la même cellule de grille que portait
   auparavant .tavern-figure-hero-close seule (voir ci-dessus). */
.tavern-figure-hero-actions {
    justify-self: end;
    display: flex;
    align-items: stretch;
    gap: 8px;
}

/* Bouton icône seul, largeur resserrée : le texte alourdirait l'en-tête à côté du nom déjà en
   gras. align-self: stretch (et non un padding recopié à la main) le cale sur la hauteur réelle de
   « Fermer » à côté, y compris dans la ligne de MerchantShopModal/MerchantManageModal dont le conteneur centre ses
   enfants (align-items-center) plutôt que de les étirer. */
.tavern-figure-hero-newtab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    width: 34px;
    padding-left: 0;
    padding-right: 0;
}

/* Sur mobile la fiche se lit en colonne : l'illustration prend la largeur, le bouton « Fermer »
   repasse au-dessus d'elle pour rester atteignable sans faire defiler toute l'image. */
@media (max-width: 620px) {
    .tavern-figure-hero {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .tavern-figure-hero-image {
        grid-column: 1 / -1;
        grid-row: 2;
        max-width: 260px;
        margin: 0 auto;
        width: 100%;
    }

    .tavern-figure-hero-identity {
        grid-row: 1;
    }

    .tavern-figure-hero-close,
    .tavern-figure-hero-actions {
        grid-row: 1;
    }
}

.tavern-disposition-ally {
    border-color: var(--dnd-green);
    background-color: rgba(62, 107, 79, 0.16);
}

.tavern-disposition-neutral {
    border-color: var(--dnd-border);
}

.tavern-disposition-enemy {
    border-color: var(--dnd-red);
    background-color: rgba(138, 42, 42, 0.16);
}

.tavern-remove-btn {
    background: transparent;
    border: none;
    color: var(--dnd-ink-dim);
    cursor: pointer;
    font-size: 13px;
    flex-shrink: 0;
}

.tavern-stock-modal {
    max-width: 680px;
}

.tavern-merchant-avatar {
    position: relative;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--dnd-border);
    background: radial-gradient(circle, rgba(201, 162, 39, 0.1) 0%, var(--dnd-bg-2) 75%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.tavern-merchant-avatar-lg {
    width: 56px;
    height: 56px;
}

/* Portrait de la boutique et de la gestion de stock : plus grand que -lg (fiches PNJ/bestiaire),
   la fenêtre y étant elle-même plus large. */
.tavern-merchant-avatar-xl {
    width: 88px;
    height: 88px;
}

.tavern-merchant-avatar-xl span {
    font-size: 32px;
}

.tavern-merchant-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tavern-merchant-avatar span {
    font-family: 'Cinzel', serif;
    font-size: 15px;
    color: var(--dnd-ink-faint);
}

.tavern-catalog-toggle {
    display: flex;
    gap: 4px;
    background: var(--dnd-bg-2);
    border-radius: 8px;
    padding: 3px;
    margin-bottom: 12px;
    width: fit-content;
}

.tavern-catalog-toggle button {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 13px;
    color: var(--dnd-ink-dim);
    cursor: pointer;
}

.tavern-catalog-toggle button.active {
    background: var(--dnd-panel-1);
    border-color: var(--dnd-border);
    color: var(--dnd-ink);
}

/* Barre de catégories (type d'objet) à gauche d'un catalogue — boutique du joueur et gestion de
   stock du MJ partagent cette même navigation. */
.tavern-categories {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tavern-category {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 9px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--dnd-ink-dim);
    text-align: left;
    font-size: 13px;
    cursor: pointer;
}

.tavern-category:hover,
.tavern-category.active {
    color: var(--dnd-ink);
    background: var(--dnd-panel-1);
    border-color: var(--dnd-border);
}

.tavern-category.active {
    box-shadow: inset 3px 0 var(--dnd-gold);
}

.tavern-category-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
}

.tavern-catalog-list {
    max-height: 220px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tavern-catalog-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--dnd-border);
    border-radius: 8px;
}

.tavern-type-badge {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--dnd-bg-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cinzel', serif;
    font-size: 11px;
    color: var(--dnd-ink-dim);
}

.tavern-stock-grid {
    max-height: 55vh;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
}

.tavern-stock-card {
    position: relative;
    padding: 14px;
    border: 1px solid var(--dnd-border);
    border-radius: 12px;
}

.tavern-stock-card .tavern-type-badge {
    margin-bottom: 8px;
}

.tavern-stock-card-remove {
    position: absolute;
    top: 8px;
    right: 8px;
}

.tavern-stock-rarity-badge {
    display: inline-block;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
    margin: 4px 0;
}

.tavern-rarity-common {
    background: rgba(169, 155, 122, 0.18);
    color: var(--dnd-ink-dim);
}

.tavern-rarity-uncommon {
    background: rgba(62, 107, 79, 0.18);
    color: var(--dnd-green-text);
}

.tavern-rarity-rare {
    background: rgba(62, 90, 107, 0.18);
    color: var(--dnd-blue-text);
}

.tavern-rarity-veryrare {
    background: rgba(201, 162, 39, 0.18);
    color: var(--dnd-gold);
}

.tavern-rarity-legendary {
    background: rgba(232, 196, 104, 0.18);
    color: var(--dnd-gold-bright);
}

.tavern-rarity-artifact {
    background: rgba(138, 42, 42, 0.18);
    color: var(--dnd-red-text);
}

/* Pictogramme d'objet en pochoir (D7, S12-T12). Le WebP genere par tools/gen-item-icons.py ne
   porte qu'un canal alpha : la forme sert de moule, la couleur vient de currentColor. Une seule
   regle pour les quatre endroits qui l'affichent (case de la silhouette, pastille du sac,
   en-tete de la modale, bulle de survol) : la teinte suit la rarete portee en data-rarity par
   un ancetre, jamais posee sur l'element lui-meme. */
.tavern-glyph {
    display: block;
    width: 100%;
    height: 100%;
    background-color: currentColor;
    -webkit-mask-image: var(--i);
    mask-image: var(--i);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Repli deux lettres (S12-T11/D7) : encore code pour un type ou un emplacement futur sans
   dessin, mais aucun des 16 pictogrammes actuels ne le declenche. */
.tavern-glyph-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-family: 'Cinzel', serif;
    font-weight: 600;
    line-height: 1;
}

[data-rarity="common"] .tavern-glyph,
[data-rarity="common"] .tavern-glyph-fallback { color: var(--dnd-ink-dim); }
[data-rarity="uncommon"] .tavern-glyph,
[data-rarity="uncommon"] .tavern-glyph-fallback { color: var(--dnd-green-text); }
[data-rarity="rare"] .tavern-glyph,
[data-rarity="rare"] .tavern-glyph-fallback { color: var(--dnd-blue-text); }
[data-rarity="veryrare"] .tavern-glyph,
[data-rarity="veryrare"] .tavern-glyph-fallback { color: var(--dnd-gold); }
[data-rarity="legendary"] .tavern-glyph,
[data-rarity="legendary"] .tavern-glyph-fallback { color: var(--dnd-gold-bright); }
[data-rarity="artifact"] .tavern-glyph,
[data-rarity="artifact"] .tavern-glyph-fallback { color: var(--dnd-red-text); }

.tavern-quest-row {
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.tavern-quest-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.tavern-quest-status-btn {
    font-family: 'Cinzel', serif;
    font-size: 11px;
    letter-spacing: 0.06em;
    padding: 4px 10px;
    border-radius: 999px;
    cursor: pointer;
    border: none;
}

/* Assistant de creation de personnage (etapes, point buy, historique, fiche laterale) */
.tavern-creator-header {
    text-align: center;
    margin-bottom: 24px;
}

.tavern-creator-header .tavern-eyebrow {
    display: block;
}

.tavern-creator-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.tavern-creator-step-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tavern-creator-step-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px 6px;
}

.tavern-creator-step-btn:disabled {
    cursor: default;
}

.tavern-creator-step-marker {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cinzel', serif;
    font-size: 12px;
    border: 1px solid var(--dnd-border);
    color: var(--dnd-ink-faint);
    flex-shrink: 0;
}

.tavern-creator-step-marker.active {
    border-color: var(--dnd-gold);
    color: var(--dnd-gold-bright);
    background: rgba(201, 162, 39, 0.15);
}

.tavern-creator-step-marker.done {
    border-color: var(--dnd-green);
    color: var(--dnd-green);
}

.tavern-creator-step-label {
    font-family: 'Cinzel', serif;
    font-size: 11px;
    letter-spacing: 0.05em;
    color: var(--dnd-ink-faint);
}

.tavern-creator-step-label.active {
    color: var(--dnd-ink);
}

.tavern-creator-step-separator {
    width: 24px;
    height: 1px;
    background-color: var(--dnd-border);
}

.tavern-creator-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 24px;
    align-items: start;
}

@media (max-width: 900px) {
    .tavern-creator-layout {
        grid-template-columns: 1fr;
    }
}

.tavern-creator-nav {
    margin-top: 20px;
}

.tavern-creator-points {
    font-family: 'Cinzel', serif;
    font-size: 12px;
    color: var(--dnd-gold-bright);
}

.tavern-creator-points.negative {
    color: var(--dnd-red);
}

.tavern-creator-abilities {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tavern-creator-ability-row {
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tavern-creator-ability-label {
    font-family: 'Cinzel', serif;
    font-size: 13px;
    letter-spacing: 0.06em;
    color: var(--dnd-label-gold);
}

.tavern-creator-ability-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--dnd-border);
    background: transparent;
    color: var(--dnd-ink);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.tavern-creator-ability-btn:disabled {
    color: var(--dnd-ink-faint);
    cursor: default;
}

.tavern-creator-ability-score {
    font-family: 'Cinzel', serif;
    font-size: 18px;
    color: var(--dnd-ink);
}

.tavern-creator-backgrounds {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}

.tavern-creator-background {
    text-align: left;
    padding: 16px 18px;
    background: transparent;
    cursor: pointer;
    color: inherit;
}

.tavern-creator-background.selected {
    border-color: var(--dnd-gold);
    background: rgba(201, 162, 39, 0.1);
}

.tavern-creator-background-name {
    font-family: 'Cinzel', serif;
    font-size: 14px;
    color: var(--dnd-ink);
    margin-bottom: 4px;
}

.tavern-creator-summary {
    max-width: 480px;
    margin: 0 auto;
}

.tavern-creator-name-input {
    max-width: 320px;
    margin: 0 auto;
    font-family: 'Cinzel', serif;
    font-size: 16px;
}

.tavern-creator-portrait-preview {
    position: relative;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 1px solid var(--dnd-gold);
    background: radial-gradient(circle, rgba(201, 162, 39, 0.15) 0%, var(--dnd-bg-2) 75%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.tavern-creator-portrait-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tavern-creator-portrait-preview span {
    font-size: 1.5rem;
    color: var(--dnd-ink-faint);
}

.tavern-creator-sheet {
    position: sticky;
    top: 20px;
}

.tavern-creator-sheet-name {
    font-family: 'Cinzel', serif;
    font-size: 16px;
    text-align: center;
    color: var(--dnd-gold-bright);
}

.tavern-creator-sheet-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    padding: 4px 0;
}

.tavern-creator-sheet-scores {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Suivi de combat : barre de tour actif, cartes de combattant, curseur de degats/soins */

/* "AU TOUR DE X" et "Tour suivant" sont les deux informations les plus consultees de la page :
   elles restent a l'ecran pendant qu'on descend appliquer des degats. Le decalage vertical
   cumule .tavern-topnav (NavMenu.razor.css, sticky, z-index 1005) et .tavern-campaign-nav
   (CampaignTabNav.razor.css, sticky juste dessous, z-index 20) : sans lui la barre se glisserait
   sous l'un des deux. */
.tavern-combat-active-bar {
    position: sticky;
    top: calc(var(--dnd-topnav-height) + var(--dnd-campaign-nav-height));
    z-index: 10;
    padding: 14px 20px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    border: 1px solid var(--dnd-gold);
    border-radius: 12px;
    /* Le fond etait a demi transparent : collante, la barre laisserait defiler les rangees au
       travers. Le degrade dore est conserve, pose sur une base opaque. */
    background: linear-gradient(90deg, rgba(201, 162, 39, 0.12), rgba(201, 162, 39, 0.02)), var(--dnd-panel-1);
}

/* Le champ de titre du compte-rendu porte un vrai libelle visible : le placeholder seul
   disparaissait des la premiere frappe et ne nommait pas le champ pour un lecteur d'ecran. */
.tavern-combat-log-field {
    display: flex;
    flex-direction: column;
    width: 220px;
}

/* Controles de fin de combat. En grand ecran, `display: contents` les remet a plat dans la
   rangee de boutons du bandeau MJ : la mise en page desktop est exactement celle d'avant, et le
   bouton de bascule est masque. */
.tavern-combat-admin {
    display: contents;
}

.tavern-combat-admin-toggle {
    display: none;
}

.tavern-combat-active-name {
    font-family: 'Cinzel', serif;
    font-size: 18px;
    color: var(--dnd-gold-bright);
}

.tavern-combat-row {
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.tavern-combat-row.active {
    border-color: var(--dnd-gold) !important;
    box-shadow: 0 0 0 1px rgba(201, 162, 39, 0.35), 0 0 24px rgba(201, 162, 39, 0.15);
    /* Reference du ::after ci-dessous. */
    position: relative;
    /* Jouee a l'ajout de la classe, donc a chaque changement de tour : c'est le repere le plus
       direct de « c'est a qui », sans avoir a relire la barre d'annonce en haut de page. */
    animation: tavern-combat-turn-arrive 260ms cubic-bezier(0.2, 0.8, 0.3, 1);
}

/* Balayage dore de gauche a droite. Anime en background-position et non en translate : le
   pseudo-element resterait alors visible hors de la ligne, et un overflow: hidden sur celle-ci
   rognerait les anneaux de focus de ses boutons. */
.tavern-combat-row.active::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(100deg, transparent 32%, rgba(232, 196, 104, 0.18) 50%, transparent 68%);
    background-size: 300% 100%;
    background-repeat: no-repeat;
    animation: tavern-combat-turn-sweep 620ms ease-out forwards;
}

@keyframes tavern-combat-turn-arrive {
    from { transform: translateX(-6px); }
    to { transform: translateX(0); }
}

@keyframes tavern-combat-turn-sweep {
    from { background-position: 100% 0; opacity: 1; }
    to { background-position: -70% 0; opacity: 0; }
}

.tavern-combat-init-badge {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--dnd-border);
    background: transparent;
    color: var(--dnd-ink-dim);
}

/* L'initiative est modifiable par le MJ : le badge accueille un champ, sans en changer le dessin.
   Les fleches natives du input[type=number] sont masquees, elles ne tiennent pas dans 42px. */
.tavern-combat-init-input {
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--dnd-ink);
    text-align: center;
    font-family: 'Cinzel', serif;
    font-size: 15px;
    -moz-appearance: textfield;
    appearance: textfield;
}

.tavern-combat-init-input::-webkit-outer-spin-button,
.tavern-combat-init-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.tavern-combat-name-col {
    min-width: 140px;
    flex: 0 0 160px;
}

.tavern-combat-name {
    font-family: 'Cinzel', serif;
    font-size: 15px;
    color: var(--dnd-ink);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

/* Un combattant a 0 PV n'etait signale que par la couleur du nom (2,14:1 d'ecart avec l'etat
   valide, la ou WCAG 1.4.1 demande 3:1 quand la couleur est le seul indice). La pastille et le
   barre sont les deux indices non chromatiques ; le barre est porte par le texte du nom seul,
   sinon il traverserait aussi la pastille. */
.tavern-combat-name.is-down {
    color: var(--dnd-ink-dim);
}

.tavern-combat-name.is-down .tavern-combat-name-text {
    text-decoration: line-through;
}

.tavern-combat-down {
    border-color: var(--dnd-red);
    color: var(--dnd-red-text);
}

.tavern-combat-hp-col {
    flex: 1 1 160px;
    min-width: 140px;
}

.tavern-combat-hp-bar {
    height: 8px;
    border-radius: 999px;
    background: var(--dnd-bg-2);
    border: 1px solid var(--dnd-border);
    overflow: hidden;
}

.tavern-combat-hp-bar-fill {
    height: 100%;
}

.tavern-combat-amount-stepper {
    display: flex;
    align-items: center;
    border: 1px solid var(--dnd-border);
    border-radius: 8px;
    overflow: hidden;
}

.tavern-combat-amount-stepper button {
    width: 26px;
    height: 26px;
    background: transparent;
    border: none;
    color: var(--dnd-ink);
    cursor: pointer;
}

.tavern-combat-amount-stepper span {
    width: 28px;
    text-align: center;
    font-family: 'Cinzel', serif;
    font-size: 13px;
}

/* Enveloppe des controles de rangee. En grand ecran elle s'efface (`display: contents`) et ses
   enfants restent des elements flex de la rangee, comme avant. En petit ecran elle devient une
   cellule de grille unique : sans elle, les boutons d'action elargissaient les colonnes de la
   rangee d'identite et le nom du combattant passait a la ligne. */
/* Etats actifs, sous le nom du combattant. Visibles de tous, MJ comme joueurs : savoir qui est
   paralyse ou empoisonne fait partie de ce qu'on lit sur la table, pas d'une information de MJ. */
.tavern-combat-conditions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
    /* Sous 640px la colonne du nom devient elle-meme un conteneur flex (nom et CA sur une ligne) :
       sans cette base a 100 %, les pastilles y entrent comme un element flex dimensionne sur son
       contenu etale et debordent de la colonne au lieu de passer a la ligne. min-width: 0 leve la
       taille minimale automatique qui empeche un element flex de retrecir sous son contenu. */
    flex-basis: 100%;
    min-width: 0;
}

.tavern-combat-condition {
    font-family: 'Cinzel', serif;
    font-size: 10px;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--dnd-red);
    background: rgba(138, 42, 42, 0.15);
    color: var(--dnd-ink);
    white-space: nowrap;
}

/* Panneau des quatorze etats deplie par le MJ. flex-basis: 100% le met sur sa propre ligne : la
   rangee de combat est un conteneur flex qui passe a la ligne, et quatorze pastilles glissees entre
   les boutons d'action y auraient ecrase le nom et la barre de PV. */
.tavern-combat-condition-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex-basis: 100%;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--dnd-border);
}

.tavern-combat-controls {
    display: contents;
}

/* Confirmation en deux temps du retrait d'un combattant, meme patron qu'InventoryItemCard. */
.tavern-combat-remove-confirm {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.tavern-combat-avatar {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--dnd-gold);
    background: radial-gradient(circle, rgba(201, 162, 39, 0.15) 0%, var(--dnd-bg-2) 75%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.tavern-combat-avatar.is-monster {
    border-color: var(--dnd-red);
    background: radial-gradient(circle, rgba(180, 60, 50, 0.18) 0%, var(--dnd-bg-2) 75%);
}

.tavern-combat-avatar.is-other {
    border-color: var(--dnd-blue);
    background: radial-gradient(circle, rgba(62, 90, 107, 0.28) 0%, var(--dnd-bg-2) 75%);
}

.tavern-combat-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tavern-combat-avatar span {
    font-family: 'Cinzel', serif;
    font-size: 14px;
    color: var(--dnd-gold-bright);
}

.tavern-combat-avatar.is-monster span {
    color: var(--dnd-red);
}

.tavern-combat-avatar.is-other span {
    color: var(--dnd-blue);
}

/* Reordonnancement de l'ordre de tour. Le glisser-deposer HTML5 n'existant ni au doigt ni au
   clavier, les deux boutons sont le moyen principal ; la poignee de glissement n'est qu'un
   raccourci souris. `draggable` est porte par la poignee seule et non par la rangee entiere,
   sinon le navigateur applique `user-select: none` a tout son contenu (nom et PV plus
   selectionnables). */
.tavern-combat-reorder {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.tavern-combat-reorder button {
    width: 30px;
    height: 26px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--dnd-border);
    border-radius: 6px;
    color: var(--dnd-ink);
    line-height: 1;
    cursor: pointer;
}

.tavern-combat-reorder button:disabled {
    color: var(--dnd-ink-faint);
    cursor: default;
}

.tavern-combat-drag-handle {
    color: var(--dnd-ink-faint);
    font-size: 18px;
    line-height: 1;
    cursor: grab;
    user-select: none;
}

/* Le panneau "Ajouter un personnage" est deplie en permanence en grand ecran (son bouton de
   bascule est masque) et replie par defaut en petit ecran, ou il repoussait la premiere rangee
   de combattant sous la ligne de flottaison. */
.tavern-combat-add-characters-toggle {
    display: none;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
}

@media (max-width: 640px) {
    .tavern-combat-add-characters-title {
        display: none;
    }

    .tavern-combat-add-characters-toggle {
        display: block;
    }

    .tavern-combat-add-characters:not(.is-open) .tavern-combat-add-characters-body {
        display: none;
    }

    /* Sans cette rangee, "Tour suivant" repassait systematiquement sous l'intitule et la barre
       collante immobilisait 111px de haut. */
    .tavern-combat-active-bar {
        flex-wrap: nowrap;
        padding: 10px 14px;
    }

    /* Cote a cote, "AU TOUR DE" ne laissait qu'une centaine de pixels au nom, qui passait a la
       ligne et portait la barre collante a 76px. Empiles, l'ensemble tient sous 60px. */
    .tavern-combat-active-label {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0 !important;
        min-width: 0;
    }

    .tavern-combat-active-name {
        font-size: 16px;
    }

    /* Les controles de fin de combat se replient derriere leur bouton : deplies, ils occupaient a
       eux seuls plus de 130px de bandeau au-dessus de la premiere rangee de combattant. */
    .tavern-combat-admin {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        width: 100%;
    }

    .tavern-combat-admin-toggle {
        display: inline-flex;
    }

    .tavern-combat-admin:not(.is-open) .tavern-combat-admin-body {
        display: none;
    }

    .tavern-combat-admin-body {
        display: flex;
        flex-wrap: wrap;
        align-items: end;
        gap: 8px;
        width: 100%;
    }

    .tavern-combat-log-field {
        width: 100%;
    }

    /* Le flex-wrap repliait la rangee en 3 blocs empiles (181px de haut). En grille : identite sur
       la premiere rangee, PV sur une ligne unique sur la deuxieme, controles sur la troisieme. */
    .tavern-combat-row {
        display: grid;
        grid-template-columns: auto auto auto minmax(0, 1fr);
        align-items: center;
        gap: 6px 10px;
        padding: 10px 12px;
    }

    /* Vue joueur : ni poignee ni boutons de reordonnancement, donc une colonne de moins. */
    .tavern-combat-row.is-read-only {
        grid-template-columns: auto auto minmax(0, 1fr);
    }

    .tavern-combat-name-col,
    .tavern-combat-hp-col {
        flex: initial;
        min-width: 0;
    }

    /* Nom et CA sur la meme ligne : la colonne etant etroite, les empiler coutait une ligne
       entiere par rangee. */
    .tavern-combat-name-col {
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
        column-gap: 8px;
    }

    .tavern-combat-name {
        font-size: 14px;
    }

    /* Chiffres et barre de PV cote a cote plutot qu'empiles : 33px -> ~21px par rangee. */
    .tavern-combat-hp-col {
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .tavern-combat-hp-figures {
        flex: 0 0 auto;
        gap: 6px;
        margin-bottom: 0 !important;
    }

    .tavern-combat-hp-bar {
        flex: 1 1 auto;
    }

    /* Les controles occupent la troisieme rangee en une seule cellule : ils ne participent donc
       pas au dimensionnement des colonnes de la rangee d'identite. */
    .tavern-combat-controls {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        grid-column: 1 / -1;
    }

    .tavern-combat-row .tavern-remove-btn,
    .tavern-combat-remove-confirm {
        margin-left: auto !important;
    }
}

/* Compendium (sorts, capacites de classe) : pastilles de filtre et cartes de fiche */
.tavern-filter-pill {
    background: transparent;
    cursor: pointer;
}

.tavern-filter-pill.active {
    border-color: var(--dnd-gold);
    background: rgba(201, 162, 39, 0.13);
}

.tavern-compendium-card {
    padding: 16px 22px;
}

.tavern-compendium-title {
    font-family: 'Cinzel', serif;
    font-size: 16px;
    color: var(--dnd-gold-bright);
}

.tavern-compendium-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--dnd-gold);
    background: radial-gradient(circle, rgba(201, 162, 39, 0.12) 0%, var(--dnd-bg-2) 75%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.tavern-compendium-icon img {
    width: 78%;
    height: 78%;
    object-fit: contain;
}

.tavern-compendium-trait-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px 20px;
    margin-top: 10px;
    padding: 12px 0;
    border-top: 1px dashed var(--dnd-border);
    border-bottom: 1px dashed var(--dnd-border);
    font-size: 14px;
}

.tavern-compendium-trait-grid .text-secondary {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Recherche globale : bouton loupe et modale de resultats */
.tavern-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 7px;
    cursor: pointer;
    border: 1px solid var(--dnd-border);
    background: transparent;
    color: var(--dnd-ink);
}

.tavern-search-btn:hover {
    border-color: var(--dnd-gold);
}

/* Menus deroulants Personnages / Compendium de la barre de navigation */
.tavern-nav-dropdown {
    position: relative;
}

.tavern-nav-dropdown-btn {
    cursor: pointer;
}

.tavern-nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    min-width: 180px;
    background: var(--dnd-panel-1);
    border: 1px solid var(--dnd-border);
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.tavern-nav-dropdown-menu a,
.tavern-nav-dropdown-menu button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 14px;
    background: transparent;
    border: none;
    color: var(--dnd-ink);
    font-family: 'Cinzel', serif;
    font-size: 12px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.tavern-nav-dropdown-menu a:hover,
.tavern-nav-dropdown-menu button:hover {
    background: rgba(201, 162, 39, 0.13);
    color: var(--dnd-gold-bright);
}

.tavern-search-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(12, 10, 8, 0.75);
    /* Au-dessus de la navigation sticky (1005, voir NavMenu.razor.css) : une modale ouverte doit
       couvrir tout le reste de l'interface. */
    z-index: 1010;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 80px 20px;
}

.tavern-search-modal {
    width: 100%;
    max-width: 560px;
    background: linear-gradient(180deg, var(--dnd-panel-1) 0%, var(--dnd-panel-2) 100%);
    border: 1px solid var(--dnd-border);
    border-radius: 14px;
    padding: 22px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

/* La fiche d'un objet porte une douzaine de champs et plusieurs sous-formulaires (arme, armure,
   charges, effets) : la largeur standard de la modale de recherche l'écraserait, et sa hauteur
   dépasserait l'écran sans un défilement interne. */
.tavern-search-modal--wide {
    max-width: 760px;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
}

/* La boutique et la gestion de stock d'un marchand affichent côte à côte des catégories, un
   catalogue et un panier (ou un formulaire d'ajout) : la largeur standard n'y laisserait la place
   à rien. */
.tavern-search-modal--shop {
    max-width: 1080px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

/* Une confirmation de suppression tient en une phrase et deux boutons : la largeur standard de
   la modale de recherche laisserait un vide disproportionné autour d'elle. */
.tavern-confirm-modal {
    max-width: 420px;
}

.tavern-search-results {
    max-height: 60vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tavern-search-result {
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: 1px solid var(--dnd-border);
    border-radius: 8px;
    padding: 10px 14px;
    cursor: pointer;
    width: 100%;
}

.tavern-search-result:hover {
    border-color: var(--dnd-gold);
}

.tavern-search-result-label {
    font-size: 14px;
    color: var(--dnd-ink);
}

.tavern-search-result-sub {
    font-size: 12px;
    color: var(--dnd-ink-dim);
}

.tavern-search-result-type {
    font-family: 'Cinzel', serif;
    font-size: 10px;
    letter-spacing: 0.06em;
    color: var(--dnd-label-gold);
    flex-shrink: 0;
}

/* Cibles tactiles WCAG 2.5.5/2.5.8 (44px minimum) sur ecran tactile, sans grossir le rendu
   visuel des petits controles : la zone cliquable est agrandie via un pseudo-element invisible
   plutot que via min-height/min-width direct sur les puces/pastilles. */
@media (pointer: coarse) {
    button, a[href], label.btn, [role="button"], summary {
        min-height: 44px;
        min-width: 44px;
    }

    /* Ces controles-la agrandissent leur zone tactile par le ::after ci-dessous, pas par leur
       taille propre. Sans annuler ici le min-width/min-height de la regle generique au-dessus,
       ils recevaient LES DEUX : une puce de 6px se retrouvait dessinee a 44px de large, et la
       rangee de puces du carrousel de creation poussait /characters/new a 631px de large pour
       375px de viewport (256px de debordement horizontal). Le commentaire en tete de ce bloc
       decrit cette intention depuis le debut ; il manquait sa mise en oeuvre.
       Les selecteurs de classe l'emportent sur le selecteur d'element `button`, l'ordre des
       regles n'entre donc pas en jeu. */
    .tavern-picker-dot, .grimoire-nav-toggle, .tavern-remove-btn,
    .tavern-quest-status-btn, .tavern-combat-amount-stepper button,
    .tavern-catalog-toggle button, .tavern-creator-ability-btn,
    .tavern-tag-remove {
        position: relative;
        min-width: 0;
        min-height: 0;
    }

    /* La poignee de glissement n'a aucun effet sur un ecran tactile (le glisser-deposer HTML5
       n'y est pilote par aucun evenement) : les boutons ↑/↓ la remplacent entierement. */
    .tavern-combat-drag-handle {
        display: none;
    }

    .tavern-picker-dot::after, .grimoire-nav-toggle::after, .tavern-remove-btn::after,
    .tavern-quest-status-btn::after, .tavern-combat-amount-stepper button::after,
    .tavern-catalog-toggle button::after, .tavern-creator-ability-btn::after,
    .tavern-tag-remove::after {
        content: "";
        position: absolute;
        inset: 50% auto auto 50%;
        width: 44px;
        height: 44px;
        transform: translate(-50%, -50%);
    }
}

@page {
    size: A4 portrait;
    margin: 12mm 11mm;
}

/* ---- Bestiaire : selecteur du referentiel et bloc de statistiques ---- */

.tavern-monster-picker {
    max-width: 760px;
}

.tavern-monster-filters {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.2fr;
    gap: 8px;
}

.tavern-monster-grid {
    max-height: 52vh;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
}

.tavern-monster-card {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: 1px solid var(--dnd-border);
    border-radius: 8px;
    cursor: pointer;
}

.tavern-monster-card:hover {
    border-color: var(--dnd-gold);
}

.tavern-monster-thumb {
    /* Indispensable : ImagePickerOverlay est en position: absolute; inset: 0 et se dimensionne sur
       son premier ancetre positionne. Sans cette ligne il remontait jusqu'au fond de modale, en
       position: fixed, et couvrait tout l'ecran d'une zone de clic invisible ouvrant le selecteur
       de fichier. */
    position: relative;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 6px;
    border: 1px solid var(--dnd-border);
    background: var(--dnd-bg-2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.tavern-monster-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tavern-monster-thumb span {
    font-family: 'Cinzel', serif;
    font-size: 16px;
    color: var(--dnd-ink-faint);
}

.tavern-monster-cr {
    font-family: 'Cinzel', serif;
    font-size: 13px;
    color: var(--dnd-gold);
    flex-shrink: 0;
}

.tavern-monster-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
}

.tavern-monster-preview {
    max-height: 55vh;
    overflow-y: auto;
}

.tavern-monster-preview-image {
    display: block;
    width: 220px;
    max-width: 40%;
    border-radius: 10px;
    border: 1px solid var(--dnd-border);
    float: right;
    margin: 0 0 12px 14px;
}

.tavern-stat-block-header {
    font-style: italic;
    font-size: 13px;
    color: var(--dnd-ink-dim);
    margin-bottom: 10px;
}

.tavern-stat-block-lines {
    margin: 0 0 10px;
}

.tavern-stat-block-line {
    display: flex;
    gap: 8px;
    font-size: 13px;
    line-height: 1.5;
}

.tavern-stat-block-line dt {
    color: var(--dnd-label-gold);
    font-weight: 400;
    flex-shrink: 0;
}

.tavern-stat-block-line dd {
    color: var(--dnd-body-copy);
    margin: 0;
}

.tavern-ability-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    margin-bottom: 12px;
}

.tavern-ability {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 2px;
    border: 1px solid var(--dnd-border);
    border-radius: 8px;
    background: var(--dnd-bg-2);
}

.tavern-ability-label {
    font-family: 'Cinzel', serif;
    font-size: 10px;
    letter-spacing: 0.06em;
    color: var(--dnd-label-gold);
}

.tavern-ability-score {
    font-size: 15px;
    color: var(--dnd-ink);
}

.tavern-ability-modifier {
    font-size: 12px;
    color: var(--dnd-ink-dim);
}

.tavern-stat-block-section {
    margin-top: 12px;
}

.tavern-stat-block-section h4 {
    font-family: 'Cinzel', serif;
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--dnd-gold);
    margin-bottom: 4px;
}

/* Les blocs du referentiel portent leurs propres retours a la ligne : sans pre-wrap, actions et
   traits s'agglutineraient en un seul paragraphe illisible. */
.tavern-stat-block-section p {
    white-space: pre-wrap;
    font-size: 13px;
    line-height: 1.5;
    color: var(--dnd-body-copy);
    margin: 0;
}

@media (max-width: 720px) {
    .tavern-monster-filters {
        grid-template-columns: 1fr 1fr;
    }

    .tavern-monster-preview-image {
        float: none;
        width: 100%;
        max-width: none;
        margin: 0 0 12px;
    }
}

.tavern-bestiary-note {
    font-size: 13px;
    line-height: 1.5;
    color: var(--dnd-body-copy);
    border-left: 2px solid var(--dnd-border-strong);
    padding-left: 10px;
}

.tavern-bestiary-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.tavern-visibility-badge {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--dnd-border-strong);
    font-size: 11px;
    color: var(--dnd-ink-faint);
}

.tavern-visibility-badge.revealed {
    border-color: var(--dnd-green-text);
    color: var(--dnd-green-text);
}

.tavern-edit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.tavern-edit-grid-abilities {
    grid-template-columns: repeat(6, 1fr);
}

.tavern-edit-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--dnd-label-gold);
}

.tavern-edit-field-wide {
    margin-bottom: 12px;
}

.tavern-edit-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--dnd-body-copy);
    margin-bottom: 12px;
}

@media (max-width: 720px) {
    .tavern-edit-grid-abilities {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ------------------------------------------------------------------ carte d'objet

   Ces regles vivaient dans la portee de CampaignItemsTab. La fiche ouverte depuis une note MJ
   (GmItemSheetModal) montre le meme objet et doit le montrer pareil : le vocabulaire visuel
   remonte donc ici, avec le reste des classes tavern-*. */

.tavern-item-card-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.tavern-item-card-title {
    min-width: 0;
}

.tavern-item-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    font-size: 12px;
    color: var(--dnd-ink-dim);
}

.tavern-item-card-origin {
    padding: 1px 7px;
    border: 1px solid var(--dnd-border);
    border-radius: 999px;
    font-size: 11px;
    letter-spacing: 0.02em;
}

/* La classe d'armure se lit avant le reste de la carte : c'est le chiffre qu'on vient chercher. */
.tavern-item-card-armor {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 8px;
    padding: 6px 10px;
    background: rgba(201, 162, 39, 0.08);
    border-left: 2px solid var(--dnd-gold);
    border-radius: 2px;
    font-size: 13px;
    color: var(--dnd-ink-dim);
}

.tavern-item-card-ac {
    font-family: 'Cinzel', serif;
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--dnd-gold-bright);
}

.tavern-item-card-effects {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 13px;
}

.tavern-item-card-effect-name {
    color: var(--dnd-gold-bright);
    font-weight: 600;
}

.tavern-item-card-effect-body {
    color: var(--dnd-ink-dim);
}

.tavern-item-card-effect-name::after {
    content: " : ";
}

/* ------------------------------------------------------------------ references du carnet MJ

   Une pastille posee dans une note MJ : creature, objet, PNJ, commercant, ambiance. Le balisage
   est produit par le serveur (GmNoteRenderService), donc hors de toute portee de composant - ces
   regles vivent ici, dans le theme, et non dans un .razor.css. Le selecteur d'insertion les reprend
   pour que ce qu'on choisit ressemble a ce qu'on lira. */

.gm-ref {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 1px 7px 2px;
    border: 1px solid var(--dnd-border-strong);
    border-radius: 11px;
    background: var(--dnd-panel-1);
    color: var(--dnd-gold-bright);
    text-decoration: none;
    font-size: 0.94em;
    line-height: 1.35;
    cursor: pointer;
    /* La pastille ne doit pas se couper en deux sur un retour a la ligne : son icone et son nom
       forment un seul objet cliquable. */
    white-space: nowrap;
}

.gm-ref:hover,
.gm-ref:focus-visible {
    border-color: var(--dnd-gold);
    background: var(--dnd-bg-1);
    text-decoration: none;
}

/* L'icone est posee en CSS et non dans le HTML : le texte indexe pour la recherche reste le nom
   ecrit par le MJ, sans emoji colle devant. */
.gm-ref::before {
    font-size: 0.9em;
}

.gm-ref-monster::before { content: "\1F409"; }
.gm-ref-npc::before { content: "\1F464"; }
.gm-ref-item::before { content: "\1F9F3"; }
.gm-ref-merchant::before { content: "\1FA99"; }
.gm-ref-ambiance::before { content: "\25B6"; }

/* Une ambiance ne mene pas a une fiche : elle lance un son. La couleur la distingue des quatre
   autres, ou l'on clique pour lire et non pour declencher. */
.gm-ref-ambiance {
    color: var(--dnd-green-text);
}

/* ------------------------------------------------------------------ selecteur de reference */

.gm-ref-picker {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: min(70vh, 620px);
}

.gm-ref-search {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--dnd-border);
    border-radius: 6px;
    background: var(--dnd-bg-2);
    color: var(--dnd-ink);
    font-size: 15px;
}

.gm-ref-search:focus {
    outline: none;
    border-color: var(--dnd-gold);
}

.gm-ref-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.gm-ref-tabs button {
    padding: 3px 10px;
    border: 1px solid var(--dnd-border);
    border-radius: 12px;
    background: transparent;
    color: var(--dnd-ink-dim);
    font-size: 12px;
    cursor: pointer;
}

.gm-ref-tabs button.on {
    border-color: var(--dnd-gold);
    color: var(--dnd-gold-bright);
}

.gm-ref-results {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
}

.gm-ref-results button {
    display: flex;
    align-items: baseline;
    gap: 8px;
    width: 100%;
    padding: 7px 8px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--dnd-ink);
    text-align: left;
    cursor: pointer;
}

.gm-ref-results button:hover,
.gm-ref-results button:focus-visible {
    background: var(--dnd-panel-1);
    outline: none;
}

/* Reprend l'icone de la pastille sans son cadre : dans la liste, c'est un reperage, pas un lien. */
.gm-ref-chip {
    flex: none;
}

.gm-ref-label {
    color: var(--dnd-ink);
}

.gm-ref-sub {
    color: var(--dnd-ink-faint);
    font-size: 12px;
    /* Un sous-titre long ne doit pas repousser la famille hors de la ligne. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gm-ref-family {
    margin-left: auto;
    flex: none;
    color: var(--dnd-label-gold);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.gm-ref-more {
    margin: 0;
    color: var(--dnd-ink-faint);
    font-size: 12px;
    text-align: center;
}

@media print {
    .tavern-app, body {
        background: #FFFFFF !important;
        color: #14110F !important;
    }

    * {
        box-shadow: none !important;
        text-shadow: none !important;
    }

    /* Les marges de page sont gerees par @page : le rembourrage d'ecran de la coquille
       d'application ferait doublon et decalerait la fiche imprimee. */
    .tavern-main {
        max-width: none;
        padding: 0;
    }

    [data-print-hide] {
        display: none !important;
    }
}