/* /Components/Audio/GmAudioPlayer.razor.rz.scp.css */
/* Lecteur d'ambiances MJ : barre flottante ancrée en bas de l'écran, présente sur toutes les
   pages. Repliée par défaut en un mini-lecteur, pour ne pas manger l'espace de travail. */

.gm-audio[b-oly7g68kou] {
    position: fixed;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    z-index: 1040;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    max-width: min(1160px, calc(100vw - 24px));
    width: max-content;
}

/* ------------------------------------------------------------------ mini-lecteur */

/* Replié, le lecteur reste un lecteur : pouvoir couper le son au milieu d'une réplique compte
   plus que gagner les quelques pixels d'une simple pastille. */
.gm-audio-mini[b-oly7g68kou] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px 5px 6px;
    background: linear-gradient(180deg, var(--dnd-panel-1) 0%, var(--dnd-panel-2) 100%);
    border: 1px solid var(--dnd-border-strong);
    border-radius: 999px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
    color: var(--dnd-ink);
}

.gm-audio-mini:hover[b-oly7g68kou] {
    border-color: var(--dnd-gold);
}

.gm-audio-mini-icon[b-oly7g68kou] {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex: none;
}

.gm-audio-mini-name[b-oly7g68kou] {
    font-family: 'Cinzel', serif;
    font-size: 12px;
    letter-spacing: 0.04em;
    white-space: nowrap;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ------------------------------------------------------------------ barre */

.gm-audio-bar[b-oly7g68kou] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    width: 100%;
    background: linear-gradient(180deg, var(--dnd-panel-1) 0%, var(--dnd-panel-2) 100%);
    border: 1px solid var(--dnd-border-strong);
    border-radius: 999px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
    color: var(--dnd-ink);
}

/* Pastille de lecture en cours : cliquable, elle ouvre la file. La file vit ici plutôt que dans
   un panneau parce que c'est là qu'on la cherche — sous le titre qui joue. */
.gm-audio-now[b-oly7g68kou] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 0 1 185px;
    padding: 3px 9px 3px 4px;
    background: none;
    border: 1px solid transparent;
    border-radius: 999px;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.gm-audio-now:hover:not(:disabled)[b-oly7g68kou] {
    border-color: var(--dnd-border);
    background: rgba(201, 162, 39, 0.06);
}

.gm-audio-now:disabled[b-oly7g68kou] {
    cursor: default;
}

.gm-audio-now-icon[b-oly7g68kou] {
    font-size: 17px;
    flex: none;
}

.gm-audio-now-text[b-oly7g68kou] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.gm-audio-now-title[b-oly7g68kou] {
    font-family: 'Cinzel', serif;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--dnd-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gm-audio-now-sub[b-oly7g68kou] {
    font-size: 10.5px;
    color: var(--dnd-ink-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}

.gm-audio-controls[b-oly7g68kou] {
    display: flex;
    align-items: center;
    gap: 1px;
    flex: none;
}

.gm-audio-btn[b-oly7g68kou] {
    flex: none;
    background: none;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--dnd-ink-dim);
    font-size: 14px;
    line-height: 1;
    padding: 6px 9px;
    cursor: pointer;
}

.gm-audio-btn:hover:not(:disabled)[b-oly7g68kou] {
    color: var(--dnd-gold-bright);
    border-color: var(--dnd-border);
}

.gm-audio-btn:disabled[b-oly7g68kou] {
    opacity: 0.35;
    cursor: default;
}

.gm-audio-btn-on[b-oly7g68kou] {
    color: var(--dnd-gold);
    border-color: var(--dnd-border-strong);
}

.gm-audio-play[b-oly7g68kou] {
    font-size: 16px;
    color: var(--dnd-ink);
}

.gm-audio-more[b-oly7g68kou] {
    font-family: 'Cinzel', serif;
    font-size: 11px;
    letter-spacing: 0.06em;
}

.gm-audio-sep[b-oly7g68kou] {
    flex: none;
    width: 1px;
    align-self: stretch;
    margin: 4px 2px;
    background: var(--dnd-border);
}

/* ------------------------------------------------------------------ progression */

.gm-audio-progress[b-oly7g68kou] {
    position: relative;
    flex: 1 1 120px;
    min-width: 70px;
    height: 16px;
    display: flex;
    align-items: center;
    cursor: pointer;
    touch-action: none;
}

.gm-audio-progress[b-oly7g68kou]::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    height: 3px;
    border-radius: 999px;
    background: var(--dnd-border);
}

.gm-audio-progress-fill[b-oly7g68kou] {
    position: absolute;
    left: 0;
    width: 0;
    height: 3px;
    border-radius: 999px;
    background: var(--dnd-gold);
}

.gm-audio-progress-handle[b-oly7g68kou] {
    position: absolute;
    left: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--dnd-gold-bright);
    transform: translateX(-50%);
    pointer-events: none;
}

.gm-audio-time[b-oly7g68kou] {
    flex: none;
    font-variant-numeric: tabular-nums;
    font-size: 10.5px;
    color: var(--dnd-ink-faint);
    white-space: nowrap;
}

/* ------------------------------------------------------------------ volume */

.gm-audio-volume[b-oly7g68kou] {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: none;
    font-size: 12px;
    color: var(--dnd-ink-dim);
}

.gm-audio-volume input[b-oly7g68kou] {
    width: 54px;
    accent-color: var(--dnd-gold);
    cursor: pointer;
}

/* ------------------------------------------------------------------ ambiances épinglées */

.gm-audio-quick[b-oly7g68kou] {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: none;
}

.gm-audio-ambience[b-oly7g68kou] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: var(--dnd-bg-2);
    border: 1px solid var(--dnd-border);
    border-radius: 999px;
    color: var(--dnd-body-copy);
    font-size: 12.5px;
    white-space: nowrap;
    cursor: pointer;
}

.gm-audio-ambience:hover:not(:disabled)[b-oly7g68kou] {
    border-color: var(--dnd-gold);
    color: var(--dnd-ink);
}

.gm-audio-ambience:disabled[b-oly7g68kou] {
    opacity: 0.4;
    cursor: default;
}

.gm-audio-ambience-on[b-oly7g68kou] {
    border-color: var(--dnd-gold);
    background: rgba(201, 162, 39, 0.14);
    color: var(--dnd-ink);
    box-shadow: inset 0 0 0 1px rgba(232, 196, 104, 0.25);
}

.gm-audio-ambience-icon[b-oly7g68kou] {
    font-size: 14px;
}

/* Sous 1180 px, les libellés tombent et les pastilles gardent icône et infobulle : mieux vaut
   cinq icônes lisibles sur une ligne qu'une barre qui déborde ou se replie sur deux rangées. */
@media (max-width: 1180px) and (min-width: 721px) {
    .gm-audio-ambience-name[b-oly7g68kou] {
        display: none;
    }

    .gm-audio-ambience[b-oly7g68kou] {
        gap: 4px;
        padding: 5px 8px;
    }

    .gm-audio-ambience-icon[b-oly7g68kou] {
        font-size: 15px;
    }
}

/* Égaliseur : d'un coup d'œil, on sait laquelle des cinq ambiances tourne — la couleur seule ne
   distingue pas « sélectionnée » de « en train de jouer ». */
.gm-audio-eq[b-oly7g68kou] {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 11px;
}

.gm-audio-eq i[b-oly7g68kou] {
    display: block;
    width: 2px;
    height: 4px;
    border-radius: 1px;
    background: var(--dnd-gold-bright);
    animation: gm-audio-eq-b-oly7g68kou 900ms ease-in-out infinite;
}

.gm-audio-eq i:nth-child(2)[b-oly7g68kou] {
    animation-delay: 150ms;
}

.gm-audio-eq i:nth-child(3)[b-oly7g68kou] {
    animation-delay: 300ms;
}

@keyframes gm-audio-eq-b-oly7g68kou {
    0%, 100% { height: 3px; }
    50% { height: 11px; }
}

@media (prefers-reduced-motion: reduce) {
    .gm-audio-eq i[b-oly7g68kou] {
        animation: none;
        height: 7px;
    }
}

/* ------------------------------------------------------------------ surfaces surgissantes */

/* Voile transparent : il ferme la surface ouverte au premier clic à côté, sans écouteur posé sur
   le document. Juste sous le lecteur (1040), au-dessus du reste de la page. */
.gm-audio-scrim[b-oly7g68kou] {
    position: fixed;
    inset: 0;
    z-index: 1039;
}

.gm-audio-pop[b-oly7g68kou] {
    position: absolute;
    bottom: calc(100% + 9px);
    z-index: 1;
    background: linear-gradient(180deg, var(--dnd-panel-1) 0%, var(--dnd-panel-2) 100%);
    border: 1px solid var(--dnd-border-strong);
    border-radius: 14px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.6);
    padding: 12px;
    color: var(--dnd-ink);
}

.gm-audio-pop-queue[b-oly7g68kou] {
    left: 0;
    width: min(330px, calc(100vw - 32px));
}

.gm-audio-pop-all[b-oly7g68kou] {
    right: 0;
    width: min(430px, calc(100vw - 32px));
}

.gm-audio-pop-title[b-oly7g68kou] {
    font-family: 'Cinzel', serif;
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dnd-label-gold);
    margin: 0 0 9px;
}

.gm-audio-search[b-oly7g68kou] {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
    background: var(--dnd-bg-2);
    border: 1px solid var(--dnd-border);
    border-radius: 8px;
    color: var(--dnd-ink);
    font-size: 13px;
    padding: 7px 10px;
}

.gm-audio-search[b-oly7g68kou]::placeholder {
    color: var(--dnd-ink-faint);
}

.gm-audio-empty[b-oly7g68kou],
.gm-audio-error[b-oly7g68kou] {
    font-size: 13px;
    color: var(--dnd-ink-faint);
    margin: 0;
}

.gm-audio-error[b-oly7g68kou] {
    max-width: 100%;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--dnd-panel-1);
    border: 1px solid var(--dnd-border-strong);
    color: var(--dnd-red-text);
}

/* ------------------------------------------------------------------ catalogue */

.gm-audio-grid[b-oly7g68kou] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    max-height: min(38vh, 260px);
    overflow-y: auto;
}

.gm-audio-card[b-oly7g68kou] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 7px 8px;
    background: var(--dnd-bg-2);
    border: 1px solid var(--dnd-border);
    border-radius: 10px;
    color: var(--dnd-body-copy);
}

.gm-audio-card:hover[b-oly7g68kou] {
    border-color: var(--dnd-gold);
    color: var(--dnd-ink);
}

.gm-audio-card-on[b-oly7g68kou] {
    border-color: var(--dnd-gold);
    background: rgba(201, 162, 39, 0.12);
    color: var(--dnd-ink);
}

.gm-audio-card-play[b-oly7g68kou] {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 1;
    min-width: 0;
    padding: 0;
    background: none;
    border: none;
    color: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.gm-audio-card-play:disabled[b-oly7g68kou] {
    opacity: 0.45;
    cursor: default;
}

.gm-audio-card-icon[b-oly7g68kou] {
    font-size: 16px;
    flex: none;
}

.gm-audio-card-body[b-oly7g68kou] {
    min-width: 0;
}

.gm-audio-card-name[b-oly7g68kou] {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gm-audio-card-meta[b-oly7g68kou] {
    display: block;
    font-size: 10px;
    color: var(--dnd-ink-faint);
}

.gm-audio-pin[b-oly7g68kou] {
    flex: none;
    background: none;
    border: none;
    padding: 2px 3px;
    font-size: 13px;
    line-height: 1;
    color: var(--dnd-ink-faint);
    cursor: pointer;
}

.gm-audio-pin:hover[b-oly7g68kou],
.gm-audio-pin-on[b-oly7g68kou] {
    color: var(--dnd-gold-bright);
}

.gm-audio-campaign[b-oly7g68kou] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.gm-audio-campaign label[b-oly7g68kou] {
    font-family: 'Cinzel', serif;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dnd-label-gold);
}

.gm-audio-campaign select[b-oly7g68kou] {
    flex: 1;
    background: var(--dnd-bg-2);
    color: var(--dnd-ink);
    border: 1px solid var(--dnd-border);
    border-radius: 8px;
    padding: 5px 8px;
    font-size: 13px;
}

.gm-audio-pop-foot[b-oly7g68kou] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px solid var(--dnd-border);
}

.gm-audio-pop-foot span[b-oly7g68kou] {
    font-size: 11px;
    color: var(--dnd-ink-faint);
}

.gm-audio-link[b-oly7g68kou] {
    background: none;
    border: none;
    padding: 0;
    color: var(--dnd-ink-dim);
    font-size: 12px;
    text-decoration: underline;
    white-space: nowrap;
    cursor: pointer;
}

.gm-audio-link:hover[b-oly7g68kou] {
    color: var(--dnd-gold-bright);
}

/* ------------------------------------------------------------------ file en cours */

.gm-audio-queue[b-oly7g68kou] {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: min(34vh, 230px);
    overflow-y: auto;
}

.gm-audio-queue button[b-oly7g68kou] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 5px 8px;
    background: none;
    border: none;
    border-radius: 6px;
    color: var(--dnd-body-copy);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.gm-audio-queue button:hover[b-oly7g68kou] {
    background: rgba(201, 162, 39, 0.08);
    color: var(--dnd-ink);
}

.gm-audio-queue-current button[b-oly7g68kou] {
    color: var(--dnd-gold-bright);
}

.gm-audio-queue-title[b-oly7g68kou] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gm-audio-queue-duration[b-oly7g68kou] {
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    color: var(--dnd-ink-faint);
    flex-shrink: 0;
}

/* ------------------------------------------------------------------ mobile */

@media (max-width: 720px) {
    .gm-audio[b-oly7g68kou] {
        left: 8px;
        right: 8px;
        bottom: 8px;
        transform: none;
        max-width: none;
        width: auto;
        align-items: stretch;
    }

    .gm-audio-mini[b-oly7g68kou] {
        align-self: flex-end;
    }

    /* Trois rangées, pas quatre : titre et repli en haut, transport et progression au milieu,
       pastilles en bas dans un défilement horizontal. Tout aligner sur une seule ligne réduirait
       la barre de progression à une poignée de pixels, et laisser le flex envelopper librement
       donnait quatre rangées au-dessus du contenu de la page. */
    .gm-audio-bar[b-oly7g68kou] {
        flex-wrap: wrap;
        border-radius: 16px;
        row-gap: 4px;
        padding: 8px 10px;
    }

    .gm-audio-collapse[b-oly7g68kou] { order: 1; }

    /* Base étroite, et non « auto » : c'est la largeur naturelle du titre qui décide des retours
       à la ligne, et un long nom de piste repoussait « Toutes » sur la rangée du transport, qui
       renvoyait à son tour la durée totale sur une quatrième. Le titre s'étire ensuite pour
       occuper la place restante. */
    .gm-audio-now[b-oly7g68kou] {
        order: 2;
        flex: 1 1 110px;
    }

    /* La boucle remonte auprès du titre : laissée avec le transport, elle débordait sur une
       rangée supplémentaire dès 360 px de large. */
    .gm-audio-loop[b-oly7g68kou] { order: 3; }

    .gm-audio-more[b-oly7g68kou] { order: 4; }

    .gm-audio-controls[b-oly7g68kou] { order: 5; }

    .gm-audio-elapsed[b-oly7g68kou] { order: 6; }

    .gm-audio-progress[b-oly7g68kou] {
        order: 7;
        flex: 1 1 60px;
    }

    .gm-audio-total[b-oly7g68kou] { order: 8; }

    .gm-audio-quick[b-oly7g68kou] {
        order: 9;
        width: 100%;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: none;
    }

    .gm-audio-quick[b-oly7g68kou]::-webkit-scrollbar {
        display: none;
    }

    /* Le réglage logiciel disparaît au profit des boutons de volume de l'appareil : il coûtait
       une rangée entière pour un geste que le téléphone fait mieux. Le séparateur n'a plus rien
       à séparer une fois les rangées empilées. */
    .gm-audio-volume[b-oly7g68kou],
    .gm-audio-sep[b-oly7g68kou] {
        display: none;
    }

    .gm-audio-grid[b-oly7g68kou] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Campaigns/BestiaryEntryModal.razor.rz.scp.css */
/* Le bloc de consultation ne se plafonne plus : sa hauteur propre ouvrait une seconde zone de
   defilement a l'interieur de celle de la fiche. */
.tavern-figure-sheet .tavern-monster-preview[b-7lq71cm7et] {
    max-height: none;
    overflow: visible;
}
/* /Components/Campaigns/CampaignBestiaryTab.razor.rz.scp.css */
.tavern-beast-toolbar[b-x4kyk5t9cb] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.tavern-beast-filters[b-x4kyk5t9cb] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1 1 320px;
}

.tavern-beast-filters .form-control[b-x4kyk5t9cb] {
    flex: 1 1 200px;
    min-width: 150px;
}

.tavern-beast-filters .form-select[b-x4kyk5t9cb] {
    flex: 0 1 190px;
}

.tavern-beast-actions[b-x4kyk5t9cb] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tavern-beast-count[b-x4kyk5t9cb] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    font-size: 12px;
    color: var(--dnd-ink-dim);
}

.tavern-beast-reset[b-x4kyk5t9cb] {
    background: none;
    border: none;
    padding: 0;
    font-size: 12px;
    color: var(--dnd-label-gold);
    text-decoration: underline;
    cursor: pointer;
}
/* /Components/Campaigns/CampaignCharactersTab.razor.rz.scp.css */
.tavern-link-panel[b-ybd025ojak] {
    padding: 14px 16px;
    border-style: dashed;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tavern-linkable-row[b-ybd025ojak] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    background: transparent;
    border: none;
    border-bottom: 1px dashed var(--dnd-border);
    padding: 8px 4px;
    cursor: pointer;
    color: var(--dnd-ink);
    font-size: 14px;
}

.tavern-linkable-plus[b-ybd025ojak] {
    font-family: 'Cinzel', serif;
    font-size: 11px;
    color: var(--dnd-label-gold);
}

.tavern-character-grid[b-ybd025ojak] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.tavern-character-card[b-ybd025ojak] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
}

.tavern-character-card-main[b-ybd025ojak] {
    all: unset;
    cursor: pointer;
    display: flex;
    gap: 14px;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.tavern-character-avatar[b-ybd025ojak] {
    width: 56px;
    height: 56px;
    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-character-avatar img[b-ybd025ojak] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tavern-character-avatar span[b-ybd025ojak] {
    font-family: 'Cinzel', serif;
    font-size: 17px;
    color: var(--dnd-ink-faint);
}

.tavern-character-name[b-ybd025ojak] {
    font-family: 'Cinzel', serif;
    font-size: 15px;
    color: var(--dnd-gold-bright);
}

.tavern-character-meta[b-ybd025ojak] {
    font-size: 13px;
    color: var(--dnd-ink-dim);
}

.tavern-character-level[b-ybd025ojak] {
    font-size: 12px;
    color: var(--dnd-label-gold);
    margin-top: 2px;
}
/* /Components/Campaigns/CampaignItemsTab.razor.rz.scp.css */
.tavern-item-toolbar[b-lbzx6vtz7n] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.tavern-item-filters[b-lbzx6vtz7n] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1 1 320px;
}

.tavern-item-filters .form-control[b-lbzx6vtz7n] {
    flex: 1 1 200px;
    min-width: 150px;
}

.tavern-item-filters .form-select[b-lbzx6vtz7n] {
    flex: 0 1 170px;
}

.tavern-item-actions[b-lbzx6vtz7n] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tavern-item-count[b-lbzx6vtz7n] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    font-size: 12px;
    color: var(--dnd-ink-dim);
}

.tavern-item-reset[b-lbzx6vtz7n] {
    background: none;
    border: none;
    padding: 0;
    font-size: 12px;
    color: var(--dnd-label-gold);
    text-decoration: underline;
    cursor: pointer;
}

/* Le formulaire reprend la disposition de la maquette : nom large en tête, type et rareté
   côte à côte, description sur toute la largeur. */
.tavern-item-form-grid[b-lbzx6vtz7n] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.tavern-item-form-name[b-lbzx6vtz7n] {
    grid-column: 1 / -1;
}

.tavern-item-form-description[b-lbzx6vtz7n] {
    grid-column: 1 / -1;
}

/* Avertissement doux sous le champ : meme ton que .tavern-detail-warning sur la fiche du
   personnage, pour que le meme signal (un objet sans emplacement) se reconnaisse partout. */
.tavern-item-form-warning[b-lbzx6vtz7n] {
    margin-top: 4px;
    font-size: 12px;
    color: var(--dnd-gold);
}

.tavern-item-card[b-lbzx6vtz7n] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tavern-item-card-note[b-lbzx6vtz7n] {
    margin: 0;
    font-size: 13px;
    color: var(--dnd-ink-dim);
    white-space: pre-wrap;
    /* Une description de campagne peut faire deux mille caractères : la carte en montre le début
       et garde une hauteur régulière dans la grille. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tavern-item-card-actions[b-lbzx6vtz7n] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Formulaire d'octroi, déplié sous la carte de l'objet concerné plutôt que dans une modale : le
   MJ distribue souvent plusieurs objets d'affilée après un combat. */
.tavern-item-grant[b-lbzx6vtz7n] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--dnd-border);
}

.tavern-item-grant .form-select[b-lbzx6vtz7n] {
    flex: 1 1 140px;
    min-width: 110px;
}

.tavern-item-grant-characters[b-lbzx6vtz7n] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    flex: 1 1 100%;
}

.tavern-item-grant-qty[b-lbzx6vtz7n] {
    flex: 0 0 70px;
    width: 70px;
}

/* Le journal déborde en largeur sur téléphone : il défile dans son cadre plutôt que de pousser
   toute la page de côté. */
.tavern-journal-scroll[b-lbzx6vtz7n] {
    overflow-x: auto;
}

.tavern-journal-table[b-lbzx6vtz7n] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.tavern-journal-table th[b-lbzx6vtz7n] {
    padding: 4px 8px;
    border-bottom: 1px solid var(--dnd-border);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--dnd-label-gold);
    white-space: nowrap;
}

.tavern-journal-table td[b-lbzx6vtz7n] {
    padding: 5px 8px;
    border-bottom: 1px solid var(--dnd-border);
    white-space: nowrap;
}

.tavern-journal-table tbody tr:last-child td[b-lbzx6vtz7n] {
    border-bottom: none;
}

/* Protection et effets : deux blocs repliés sous la fiche principale, cadrés pour qu'on voie
   d'un coup d'œil où finit l'essentiel et où commence le détail. */
.tavern-item-subform[b-lbzx6vtz7n] {
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid var(--dnd-border);
    border-radius: 3px;
    background: var(--dnd-panel-2);
}

.tavern-item-subform-title[b-lbzx6vtz7n] {
    float: none;
    width: auto;
    margin: 0 0 8px;
    padding: 0;
    font-family: 'Cinzel', serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--dnd-label-gold);
}

.tavern-item-check[b-lbzx6vtz7n] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    cursor: pointer;
}

/* Une ligne d'effet est une petite fiche à part entière : le nom en tête sur toute la largeur,
   la mécanique en dessous, la prose en pied. */
.tavern-effect-row[b-lbzx6vtz7n] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
    padding: 10px 12px;
    border-left: 2px solid var(--dnd-border-strong);
    border-radius: 2px;
    background: var(--dnd-bg-3);
}

.tavern-effect-name[b-lbzx6vtz7n],
.tavern-effect-description[b-lbzx6vtz7n],
.tavern-effect-row-footer[b-lbzx6vtz7n] {
    grid-column: 1 / -1;
}

.tavern-effect-value[b-lbzx6vtz7n] {
    max-width: 120px;
}

.tavern-effect-row-footer[b-lbzx6vtz7n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/* Les propriétés d'arme se cochent en grappe : elles vont souvent par deux ou trois, et une
   colonne de neuf cases isolées se parcourrait mal. */
.tavern-weapon-properties[b-lbzx6vtz7n],
.tavern-item-slots[b-lbzx6vtz7n] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
}
/* /Components/Campaigns/CampaignJournalTab.razor.rz.scp.css */
.tavern-journal-timeline[b-yzysoe53l4] {
    position: relative;
    padding-left: 24px;
}

.tavern-journal-timeline[b-yzysoe53l4]::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: var(--dnd-border);
}

.tavern-journal-entry[b-yzysoe53l4] {
    position: relative;
    margin-bottom: 22px;
    padding: 18px 22px;
}

.tavern-journal-entry[b-yzysoe53l4]::before {
    content: "";
    position: absolute;
    left: -24px;
    top: 22px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--dnd-border);
    border: 1px solid var(--dnd-border);
}

.tavern-journal-date[b-yzysoe53l4] {
    font-size: 12px;
    color: var(--dnd-label-gold);
    font-family: 'Cinzel', serif;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
}

.tavern-journal-title[b-yzysoe53l4] {
    font-family: 'Cinzel', serif;
    font-size: 16px;
    color: var(--dnd-ink);
    margin-bottom: 8px;
}

.tavern-journal-summary[b-yzysoe53l4] {
    font-size: 15px;
    color: var(--dnd-body-copy);
    line-height: 1.6;
}
/* /Components/Campaigns/CampaignMerchantsTab.razor.rz.scp.css */
/* Etat de visibilite d'une echoppe, reserve au MJ : discret par defaut, franc une fois ouverte
   a la table. C'est l'information qu'il cherche d'un coup d'oeil avant une seance. */
.tavern-merchant-visibility[b-q667k4ubqc] {
    margin-top: 6px;
    padding: 1px 8px;
    background: none;
    border: 1px solid var(--dnd-border);
    border-radius: 999px;
    font-size: 11px;
    letter-spacing: 0.02em;
    color: var(--dnd-ink-dim);
    cursor: pointer;
}

.tavern-merchant-visibility.revealed[b-q667k4ubqc] {
    border-color: var(--dnd-label-gold);
    color: var(--dnd-label-gold);
}
/* /Components/Campaigns/CampaignNpcsTab.razor.rz.scp.css */
/* Champ photo du formulaire d'ajout : hors de .tavern-add-form-row, qui aligne ses champs sur une
   ligne de saisie de meme hauteur — un selecteur de fichier y aurait deborde. */
.tavern-npc-photo-field[b-wd439rr96k] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.tavern-npc-photo-field .form-control[b-wd439rr96k] {
    flex: 0 1 320px;
}

.tavern-figure-reset[b-wd439rr96k] {
    background: none;
    border: none;
    padding: 0;
    font-size: 12px;
    color: var(--dnd-label-gold);
    text-decoration: underline;
    cursor: pointer;
}

/* La pastille de disposition reprend la teinte de son etat, la ou le bestiaire garde le fond
   sombre commun du facteur de puissance. */
.tavern-figure-badge[b-wd439rr96k] {
    color: var(--dnd-ink);
}
/* /Components/Campaigns/CampaignOverviewTab.razor.rz.scp.css */
.tavern-overview-grid[b-gb44t9u56v] {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 20px;
}

@media (max-width: 767.98px) {
    .tavern-overview-grid[b-gb44t9u56v] {
        grid-template-columns: 1fr;
    }
}

.tavern-overview-card[b-gb44t9u56v] {
    padding: 22px 26px;
}

.tavern-overview-value[b-gb44t9u56v] {
    font-family: 'Cinzel', serif;
    font-size: 17px;
    color: var(--dnd-gold-bright);
    margin-bottom: 6px;
}

.tavern-overview-subtext[b-gb44t9u56v] {
    font-size: 14px;
    color: var(--dnd-ink-dim);
    line-height: 1.5;
}

.tavern-overview-treasury[b-gb44t9u56v] {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.tavern-overview-treasury .tavern-overview-value[b-gb44t9u56v] {
    font-size: 22px;
    margin-bottom: 0;
}

.tavern-overview-treasury-input[b-gb44t9u56v] {
    max-width: 120px;
}
/* /Components/Campaigns/CampaignTabNav.razor.rz.scp.css */
/* Hauteur fixe, quel que soit l'onglet actif : c'est ce qui permet aux autres barres sticky de
   la page (ex. .tavern-combat-active-bar, .gm-frame dans GmNotesPage) de se caler dessous avec
   un simple decalage constant plutot qu'un calcul qui varierait selon l'ecran affiche. */
.tavern-campaign-nav[b-csontuq7qp] {
    position: sticky;
    top: var(--dnd-topnav-height);
    z-index: 20;
    background: var(--dnd-bg-2);
    border-bottom: 1px solid var(--dnd-border);
    margin-bottom: 20px;
}

.tavern-campaign-crumb[b-csontuq7qp] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 10px 22px 0;
    min-width: 0;
}

.tavern-campaign-crumb-back[b-csontuq7qp] {
    flex-shrink: 0;
    font-family: 'Cinzel', serif;
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--dnd-ink-faint);
}

.tavern-campaign-crumb-back:hover[b-csontuq7qp] {
    color: var(--dnd-gold-bright);
}

.tavern-campaign-crumb-name[b-csontuq7qp] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: 'Cinzel', serif;
    font-size: 12px;
    letter-spacing: 0.03em;
    color: var(--dnd-ink-dim);
}

/* Pas d'overflow-x:auto ici, volontairement : quatre des six declencheurs sont des menus
   deroulants (position: absolute, plus hauts que la rangee elle-meme) — un defilement horizontal
   les roguerait a la hauteur d'une ligne (voir le commentaire equivalent dans le .razor). Le
   flex-wrap laisse la rangee passer sur deux lignes sur tres petit ecran a la place. */
.tavern-campaign-tabs[b-csontuq7qp] {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 4px;
    padding: 0 22px;
}

.tavern-campaign-tab[b-csontuq7qp] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 12px 15px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    font-family: 'Cinzel', serif;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dnd-ink-dim);
}

.tavern-campaign-tab:hover[b-csontuq7qp] {
    color: var(--dnd-ink);
}

.tavern-campaign-tab.active[b-csontuq7qp] {
    border-bottom-color: var(--dnd-gold);
    color: var(--dnd-gold-bright);
}

.tavern-campaign-tab-more[b-csontuq7qp] {
    position: relative;
    flex-shrink: 0;
}

/* Backdrop transparent plein ecran : capte le clic exterieur pour fermer le menu de groupe.
   Sous .tavern-campaign-tab-more-menu (z-index 60) pour ne pas passer devant le menu lui-meme. */
/* Sous .tavern-campaign-nav (z-index 20) et non dedans : place a l'interieur, ce backdrop plein
   ecran recouvrirait aussi les boutons declencheurs voisins (z-index:auto), qui absorberaient
   alors son clic de fermeture au lieu de recevoir le clic d'ouverture attendu. En restant en
   dehors avec un z-index plus bas, toute la barre (boutons ET menu ouvert, dans le contexte
   d'empilement de .tavern-campaign-nav) passe au-dessus comme un seul bloc : cliquer un autre
   declencheur pendant qu'un menu est ouvert l'atteint directement, sans clic de fermeture
   intermediaire. Meme principe que .tavern-nav-backdrop (NavMenu.razor.css). */
.tavern-campaign-tab-more-backdrop[b-csontuq7qp] {
    position: fixed;
    inset: 0;
    z-index: 15;
    background: transparent;
}

.tavern-campaign-tab-more-menu[b-csontuq7qp] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    min-width: 170px;
    background: var(--dnd-panel-1);
    border: 1px solid var(--dnd-border);
    border-radius: 8px;
    padding: 6px;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.4);
}

.tavern-campaign-tab-more-menu button[b-csontuq7qp] {
    text-align: left;
    background: transparent;
    border: none;
    border-radius: 5px;
    padding: 9px 12px;
    font-family: 'Cinzel', serif;
    font-size: 12px;
    letter-spacing: 0.05em;
    color: var(--dnd-ink-dim);
    cursor: pointer;
}

.tavern-campaign-tab-more-menu button:hover[b-csontuq7qp] {
    background: rgba(201, 162, 39, 0.13);
    color: var(--dnd-gold-bright);
}

.tavern-campaign-tab-more-menu button.active[b-csontuq7qp] {
    color: var(--dnd-gold-bright);
}
/* /Components/Campaigns/MerchantModal.razor.rz.scp.css */
/* Filtres du dialogue d'ajout : recherche large, type en appoint. */
.tavern-picker-filters[b-hkr3tpvgy6] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tavern-picker-filters .form-control[b-hkr3tpvgy6] {
    flex: 1 1 200px;
    min-width: 140px;
}

.tavern-picker-filters .form-select[b-hkr3tpvgy6] {
    flex: 0 1 170px;
}

/* Prix et quantité tiennent sur la ligne de l'objet : les saisir avant d'ajouter évite
   l'aller-retour « j'ajoute, puis je corrige ». Étroits pour ne pas voler la place au nom, qui
   reste ce qu'on lit en premier. */
.tavern-picker-number[b-hkr3tpvgy6] {
    flex: 0 0 74px;
    width: 74px;
    padding-inline: 6px;
    font-size: 12px;
}

/* Sous 480 px la ligne passe en deux temps : l'objet, puis ses chiffres et le bouton. */
@media (max-width: 480px) {
    .tavern-catalog-row[b-hkr3tpvgy6] {
        flex-wrap: wrap;
    }

    .tavern-picker-number[b-hkr3tpvgy6] {
        flex: 1 1 60px;
        width: auto;
    }
}

.shop-header[b-hkr3tpvgy6] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.shop-header-title[b-hkr3tpvgy6] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Bascule "Mode gestion" : au repos elle se fond dans les autres boutons de l'en-tête, active
   elle prend la teinte or pour rappeler qu'on modifie l'échoppe, pas qu'on la visite. */
.shop-gestion-toggle[b-hkr3tpvgy6] {
    padding: 0 14px;
    height: 38px;
    border: 1px solid var(--dnd-border-strong);
    border-radius: 10px;
    background: var(--dnd-panel-1);
    color: var(--dnd-gold-bright);
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}

.shop-gestion-toggle:hover[b-hkr3tpvgy6] {
    border-color: var(--dnd-gold);
}

.shop-gestion-toggle.active[b-hkr3tpvgy6] {
    background: var(--dnd-gold);
    border-color: var(--dnd-gold);
    color: var(--dnd-bg-2);
}

.shop-adminbar[b-hkr3tpvgy6] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding: 10px 14px;
    border: 1px solid var(--dnd-border-strong);
    border-radius: 10px;
    background: linear-gradient(90deg, rgba(201, 162, 39, .12), rgba(201, 162, 39, .02));
}

.shop-adminbar p[b-hkr3tpvgy6] {
    flex: 1 1 auto;
    margin: 0;
    color: var(--dnd-ink-dim);
    font-size: 12px;
}

.shop-admin-badge[b-hkr3tpvgy6] {
    padding: 4px 9px;
    border: 1px solid var(--dnd-gold);
    border-radius: 999px;
    color: var(--dnd-gold-bright);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .1em;
}

/* Bascule Acheter / Revendre, dans l'esprit des onglets déjà utilisés ailleurs dans l'app mais
   sans dépendre d'eux : cette modale est la seule à avoir besoin de deux modes de transaction. */
.shop-tabs[b-hkr3tpvgy6] {
    display: flex;
    gap: 4px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--dnd-border);
}

.shop-tab[b-hkr3tpvgy6] {
    padding: 9px 16px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--dnd-ink-dim);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 12px;
}

.shop-tab.active[b-hkr3tpvgy6] {
    color: var(--dnd-ink);
    border-color: var(--dnd-gold);
}

.shop-shopper-bar[b-hkr3tpvgy6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.shop-shopper-bar .form-select[b-hkr3tpvgy6] {
    flex: 0 1 200px;
}

.shop-shopper-purse[b-hkr3tpvgy6] {
    font-size: 12px;
    color: var(--dnd-label-gold);
}

.shop-toolbar[b-hkr3tpvgy6] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.shop-search[b-hkr3tpvgy6] {
    flex: 1 1 240px;
}

.shop-sort[b-hkr3tpvgy6] {
    flex: 0 1 190px;
}

.shop-layout[b-hkr3tpvgy6] {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) 280px;
    gap: 16px;
    align-items: start;
}

/* Mode gestion : pas de panier, le catalogue occupe la place laissée libre. */
.shop-layout-manage[b-hkr3tpvgy6] {
    grid-template-columns: 150px minmax(0, 1fr);
}

.shop-catalog[b-hkr3tpvgy6] {
    min-width: 0;
}

.shop-product-list[b-hkr3tpvgy6] {
    display: grid;
    gap: 7px;
}

.shop-product[b-hkr3tpvgy6] {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: 1px solid var(--dnd-border);
    border-radius: 10px;
    background: var(--dnd-panel-2);
    transition: border-color .15s ease;
    cursor: pointer;
}

.shop-product:hover[b-hkr3tpvgy6] {
    border-color: var(--dnd-border-strong);
}

.shop-item-name[b-hkr3tpvgy6] {
    overflow: hidden;
    color: var(--dnd-ink);
    font-size: 14px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shop-item-price[b-hkr3tpvgy6] {
    min-width: 56px;
    text-align: right;
    color: var(--dnd-gold);
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
}

.shop-stock[b-hkr3tpvgy6] {
    color: var(--dnd-green-text);
}

.shop-low-stock[b-hkr3tpvgy6] {
    color: var(--dnd-red-text);
}

.shop-add-button[b-hkr3tpvgy6] {
    width: 32px;
    height: 32px;
    border: 1px solid var(--dnd-gold);
    border-radius: 8px;
    background: transparent;
    color: var(--dnd-gold-bright);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.shop-add-button:hover:not(:disabled)[b-hkr3tpvgy6] {
    background: var(--dnd-gold);
    color: var(--dnd-bg-2);
}

.shop-add-button:disabled[b-hkr3tpvgy6] {
    cursor: not-allowed;
    opacity: .4;
}

/* Ligne de gestion : icône, nom+méta, puis modifier/retirer à la place du prix/ajout. */
.shop-product-manage[b-hkr3tpvgy6] {
    grid-template-columns: 34px minmax(0, 1fr) auto auto;
}

.shop-icon-button[b-hkr3tpvgy6] {
    width: 32px;
    height: 32px;
    border: 1px solid var(--dnd-border-strong);
    border-radius: 8px;
    background: var(--dnd-panel-1);
    color: var(--dnd-ink);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.shop-icon-button:hover[b-hkr3tpvgy6] {
    border-color: var(--dnd-gold);
    color: var(--dnd-gold-bright);
}

.shop-icon-button-danger:hover[b-hkr3tpvgy6] {
    border-color: var(--dnd-red);
    color: var(--dnd-red-text);
}

.shop-cart[b-hkr3tpvgy6] {
    display: flex;
    flex-direction: column;
    padding-left: 16px;
    border-left: 1px solid var(--dnd-border);
}

.shop-cart-title[b-hkr3tpvgy6] {
    margin: 0 0 10px;
    color: var(--dnd-label-gold);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .1em;
}

.shop-cart-empty[b-hkr3tpvgy6] {
    padding: 24px 10px;
    color: var(--dnd-ink-faint);
    text-align: center;
    border: 1px dashed var(--dnd-border);
    border-radius: 10px;
    font-size: 13px;
}

.shop-cart-items[b-hkr3tpvgy6] {
    display: grid;
    gap: 8px;
}

.shop-cart-item[b-hkr3tpvgy6] {
    padding: 9px;
    border: 1px solid var(--dnd-border);
    border-radius: 9px;
    background: var(--dnd-panel-2);
}

.shop-cart-item-top[b-hkr3tpvgy6] {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.shop-cart-item-name[b-hkr3tpvgy6] {
    font-size: 13px;
    color: var(--dnd-ink);
}

.shop-cart-remove[b-hkr3tpvgy6] {
    border: 0;
    background: transparent;
    color: var(--dnd-ink-faint);
    cursor: pointer;
}

.shop-cart-remove:hover[b-hkr3tpvgy6] {
    color: var(--dnd-red-text);
}

.shop-cart-item-bottom[b-hkr3tpvgy6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
}

.shop-quantity[b-hkr3tpvgy6] {
    display: flex;
    align-items: center;
    border: 1px solid var(--dnd-border);
    border-radius: 7px;
    overflow: hidden;
}

.shop-quantity button[b-hkr3tpvgy6] {
    width: 26px;
    height: 25px;
    border: 0;
    background: var(--dnd-panel-1);
    color: var(--dnd-ink);
    cursor: pointer;
}

.shop-quantity button:hover:not(:disabled)[b-hkr3tpvgy6] {
    background: var(--dnd-border);
}

.shop-quantity button:disabled[b-hkr3tpvgy6] {
    cursor: not-allowed;
    opacity: .4;
}

.shop-quantity span[b-hkr3tpvgy6] {
    width: 28px;
    text-align: center;
    font-size: 12px;
    color: var(--dnd-ink);
}

.shop-cart-summary[b-hkr3tpvgy6] {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--dnd-border);
}

.shop-summary-line[b-hkr3tpvgy6] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    color: var(--dnd-ink-dim);
    font-size: 13px;
}

.shop-summary-line.total[b-hkr3tpvgy6] {
    margin-top: 10px;
    color: var(--dnd-ink);
    font-size: 16px;
    font-weight: 600;
}

.shop-summary-line.total strong[b-hkr3tpvgy6] {
    color: var(--dnd-gold);
}

.shop-buy-button[b-hkr3tpvgy6] {
    width: 100%;
    margin-top: 10px;
    padding: 10px 14px;
    border: 1px solid var(--dnd-gold);
    border-radius: 9px;
    background: linear-gradient(180deg, var(--dnd-gold-bright) 0%, var(--dnd-gold) 100%);
    color: var(--dnd-bg-2);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    cursor: pointer;
}

.shop-buy-button:hover:not(:disabled)[b-hkr3tpvgy6] {
    filter: brightness(1.08);
}

.shop-buy-button:disabled[b-hkr3tpvgy6] {
    cursor: not-allowed;
    filter: grayscale(1);
    opacity: .5;
}

.shop-feedback[b-hkr3tpvgy6] {
    margin-top: 8px;
    color: var(--dnd-red-text);
    text-align: center;
    font-size: 12px;
}

.shop-sell-heading[b-hkr3tpvgy6] {
    margin-bottom: 10px;
    color: var(--dnd-label-gold);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .1em;
}

.shop-sell-row[b-hkr3tpvgy6] {
    grid-template-columns: 34px minmax(0, 1fr) auto;
}

@media (max-width: 900px) {
    .shop-layout[b-hkr3tpvgy6],
    .shop-layout-manage[b-hkr3tpvgy6] {
        grid-template-columns: 120px minmax(0, 1fr);
    }

    .shop-cart[b-hkr3tpvgy6] {
        grid-column: 1 / -1;
        padding-left: 0;
        padding-top: 16px;
        border-left: 0;
        border-top: 1px solid var(--dnd-border);
    }
}

@media (max-width: 620px) {
    .shop-layout[b-hkr3tpvgy6] {
        display: block;
    }

    .shop-layout .tavern-categories[b-hkr3tpvgy6] {
        flex-direction: row;
        gap: 6px;
        margin-bottom: 12px;
        overflow-x: auto;
    }

    .shop-layout .tavern-category[b-hkr3tpvgy6] {
        flex: 0 0 auto;
    }

    .shop-cart[b-hkr3tpvgy6] {
        margin-top: 16px;
        padding-top: 16px;
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid var(--dnd-border);
    }
}
/* /Components/Characters/AbilityScoreCard.razor.rz.scp.css */
.tavern-ability-card[b-ajmulledt1] {
    padding: 14px 10px;
    text-align: center;
}

.tavern-ability-mod[b-ajmulledt1] {
    font-family: 'Cinzel', serif;
    font-size: 24px;
    color: var(--dnd-gold-bright);
    margin: 4px 0;
}

.tavern-ability-save[b-ajmulledt1] {
    width: 100%;
    background: transparent;
    border: none;
    border-top: 1px dashed var(--dnd-border);
    padding-top: 6px;
    font-size: 11px;
    color: var(--dnd-ink-dim);
    cursor: pointer;
}

.tavern-ability-save.proficient[b-ajmulledt1] {
    color: var(--dnd-green);
}

/* La valeur saisie reste lisible à côté de la valeur effective : c'est elle que le joueur
   modifiera, et la confondre avec un score gonflé par un objet ferait saisir de travers. */
.tavern-ability-written[b-ajmulledt1] {
    margin-left: 4px;
    color: var(--dnd-ink-faint);
}
/* /Components/Characters/AddInventoryItemDialog.razor.rz.scp.css */
.tavern-inventory-picker-filters[b-dnthpps5er] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tavern-inventory-picker-filters .form-control[b-dnthpps5er] {
    flex: 1 1 160px;
    min-width: 120px;
}

.tavern-inventory-picker-filters .form-select[b-dnthpps5er] {
    flex: 0 1 150px;
}

/* Liste bornée en hauteur : le référentiel d'une campagne dépasse vite l'écran d'un téléphone,
   et le formulaire qui suit doit rester atteignable sans faire défiler toute la fiche. */
.tavern-inventory-picker-list[b-dnthpps5er] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 220px;
    overflow-y: auto;
}

.tavern-inventory-picker-row[b-dnthpps5er] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 5px 8px;
    background: none;
    border: 1px solid var(--dnd-border);
    border-radius: 6px;
    text-align: left;
    cursor: pointer;
}

.tavern-inventory-picker-row.selected[b-dnthpps5er] {
    border-color: var(--dnd-label-gold);
}

/* Un objet réservé au MJ reste visible mais inerte : le masquer laisserait croire qu'il n'existe
   pas, alors qu'il s'achète chez un marchand ou se reçoit en butin. */
.tavern-inventory-picker-row:disabled[b-dnthpps5er] {
    opacity: 0.55;
    cursor: not-allowed;
}

.tavern-inventory-picker-name[b-dnthpps5er] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.tavern-inventory-picker-locked[b-dnthpps5er] {
    flex: 0 0 auto;
    padding: 0 6px;
    border: 1px solid var(--dnd-border);
    border-radius: 999px;
    font-size: 10px;
    letter-spacing: 0.04em;
    color: var(--dnd-ink-dim);
}
/* /Components/Characters/BardaItemDialog.razor.rz.scp.css */
/* Le fond et le cadre viennent des classes globales .tavern-search-backdrop /
   .tavern-search-modal / .tavern-search-modal--wide (dnd-theme.css) : même patron que la
   recherche globale et la fiche d'objet en lecture seule des notes MJ. Seul le contenu propre
   à cette modale (S12-T07) est scopé ici. */
.barda-dialog[b-deipcac6vu] {
    display: flex;
    flex-direction: column;
    padding: 0;
}

/* Sous 780 px la modale devient une feuille qui glisse depuis le bas plutot qu'une boite
   centree : plus naturel au pouce, et la fiche + « ou le porter » restent atteignables sans
   viser une croix minuscule en haut d'un ecran tenu a une main (S12-T13). */
@media (max-width: 780px) {
    .barda-dialog-backdrop[b-deipcac6vu] {
        align-items: flex-end;
        padding: 0;
    }

    .barda-dialog[b-deipcac6vu] {
        width: 100%;
        max-width: none;
        max-height: 88vh;
        border-radius: 16px 16px 0 0;
    }
}

.barda-dialog-head[b-deipcac6vu] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--dnd-border);
}

/* Cadre de 54 px pour un pictogramme de 34 (D7, S12-T12) : la teinte vient du data-rarity posé
   ici même, lu par la règle globale [data-rarity] .tavern-glyph de dnd-theme.css. */
.barda-dialog-glyph[b-deipcac6vu] {
    flex: none;
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--dnd-border);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.3);
    color: var(--dnd-ink-dim);
}

.barda-dialog-glyph .tavern-glyph[b-deipcac6vu],
.barda-dialog-glyph .tavern-glyph-fallback[b-deipcac6vu] {
    width: 34px;
    height: 34px;
}

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

.barda-dialog-head-text[b-deipcac6vu] {
    min-width: 0;
    flex: 1;
}

.barda-dialog-eyebrow[b-deipcac6vu] {
    margin: 0 0 3px;
    font-family: 'Cinzel', serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--dnd-label-gold);
}

.barda-dialog-head-text h4[b-deipcac6vu] {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.25;
}

.barda-dialog-sub[b-deipcac6vu] {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    color: var(--dnd-ink-dim);
}

.barda-dialog-close[b-deipcac6vu] {
    flex: none;
    width: 30px;
    height: 30px;
    background: none;
    border: 1px solid var(--dnd-border);
    border-radius: 3px;
    color: var(--dnd-ink-dim);
    font-size: 13px;
    cursor: pointer;
}

.barda-dialog-close:hover[b-deipcac6vu] {
    border-color: var(--dnd-border-strong);
    color: var(--dnd-ink);
}

.barda-dialog-close:focus-visible[b-deipcac6vu] {
    outline: 2px solid var(--dnd-gold);
    outline-offset: 2px;
}

/* ---- Le corps, en deux panneaux (D3 du plan S12) ---- */
.barda-dialog-body[b-deipcac6vu] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    min-height: 0;
}

/* Meme seuil que le reste du Barda (780 px, S12-T13) : la fiche d'abord, « ou le porter » /
   « mettre a la place » en dessous, plutot qu'a cote — deja le comportement voulu, seul le
   seuil est aligne pour que le corps de la modale bascule au meme moment que le reste. */
@media (max-width: 780px) {
    .barda-dialog-body[b-deipcac6vu] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.barda-dialog-detail[b-deipcac6vu] {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.barda-dialog-swap[b-deipcac6vu] {
    border-left: 1px solid var(--dnd-border);
    background: rgba(0, 0, 0, 0.16);
    padding: 16px 15px;
    min-width: 0;
}

@media (max-width: 780px) {
    .barda-dialog-swap[b-deipcac6vu] {
        border-left: none;
        border-top: 1px solid var(--dnd-border);
    }
}

.barda-dialog-swap h5[b-deipcac6vu] {
    margin: 0 0 9px;
    font-family: 'Cinzel', serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--dnd-label-gold);
}

/* .barda-row-badge est aussi utilisée par CharacterBarda.razor, mais l'isolation CSS ne
   traverse pas les composants (même situation que .tavern-detail-* plus bas) : dupliquée ici,
   28 px au total pour tenir dans la colonne de grille du même nom (S12-T12). */
.barda-row-badge[b-deipcac6vu] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 4px;
    box-sizing: content-box;
    border-radius: 3px;
    border: 1px solid var(--dnd-border);
    background: rgba(0, 0, 0, 0.3);
    color: var(--dnd-ink-dim);
}

.barda-swap-list[b-deipcac6vu] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.barda-swap-row[b-deipcac6vu] {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 9px;
    align-items: center;
    width: 100%;
    text-align: left;
    border: 1px solid var(--dnd-border);
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.28);
    color: var(--dnd-ink);
    padding: 6px 8px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
}

/* Cible tactile de 44 px minimum (S12-T13). */
@media (max-width: 780px) {
    .barda-swap-row[b-deipcac6vu] {
        min-height: 44px;
        padding: 9px 8px;
    }
}

.barda-swap-row:hover[b-deipcac6vu] {
    border-color: var(--dnd-gold);
    background: rgba(201, 162, 39, 0.11);
}

.barda-swap-row:focus-visible[b-deipcac6vu] {
    outline: 2px solid var(--dnd-gold);
    outline-offset: 1px;
}

.barda-swap-row:disabled[b-deipcac6vu] {
    cursor: not-allowed;
    opacity: 0.6;
}

.barda-swap-name[b-deipcac6vu] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* .tavern-rarity-* (dnd-theme.css) applique deja un fond en pastille : mateur ici a la
       taille du texte, pas de la ligne. */
    padding: 0;
    background: none !important;
}

.barda-swap-sub[b-deipcac6vu] {
    display: block;
    font-size: 11px;
    color: var(--dnd-ink-faint);
}

.barda-swap-empty[b-deipcac6vu],
.barda-swap-note[b-deipcac6vu] {
    margin: 0;
    font-size: 12px;
    color: var(--dnd-ink-faint);
    font-style: italic;
}

.barda-swap-note[b-deipcac6vu] {
    margin-top: 9px;
}

/* ---- La fiche, reprise de l'ancien panneau de détail (CharacterEquipmentTab) ---- */
.tavern-detail-empty[b-deipcac6vu] {
    margin: 0;
    font-size: 14px;
    color: var(--dnd-ink-faint);
}

.tavern-detail-banner[b-deipcac6vu] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 11px;
    background: rgba(201, 162, 39, 0.08);
    border-left: 2px solid var(--dnd-gold);
    border-radius: 2px;
}

.tavern-detail-banner .n[b-deipcac6vu] {
    font-family: 'Cinzel', serif;
    font-size: 21px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--dnd-gold-bright);
}

.tavern-detail-banner .l[b-deipcac6vu] {
    font-family: 'Cinzel', serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dnd-ink);
}

.tavern-detail-effect[b-deipcac6vu] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.tavern-detail-effect p[b-deipcac6vu] {
    margin: 0;
    font-size: 14px;
}

.tavern-detail-effect .name[b-deipcac6vu] {
    font-weight: 600;
    color: var(--dnd-gold-bright);
}

.tavern-detail-chips[b-deipcac6vu] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.tavern-detail-chip[b-deipcac6vu] {
    padding: 2px 7px;
    background: rgba(62, 90, 107, 0.18);
    border: 1px solid var(--dnd-blue);
    border-radius: 2px;
    font-size: 11px;
    color: var(--dnd-blue-text);
    font-variant-numeric: tabular-nums;
}

.tavern-detail-chip.bound[b-deipcac6vu] {
    background: rgba(201, 162, 39, 0.12);
    border-color: var(--dnd-gold);
    color: var(--dnd-gold-bright);
}

.tavern-detail-flavour[b-deipcac6vu] {
    margin: 0;
    padding: 10px 12px;
    background: var(--dnd-bg-3);
    border: 1px solid var(--dnd-border);
    border-radius: 3px;
    font-style: italic;
    font-size: 13px;
    color: var(--dnd-ink-dim);
    white-space: pre-wrap;
}

.tavern-detail-warning[b-deipcac6vu] {
    margin: 0;
    font-size: 13px;
    color: var(--dnd-gold);
}

/* Le refus prévisible (arme secondaire bloquée…) se distingue du reste par la couleur : ce
   n'est pas une information, c'est un geste qui va échouer si on insiste. */
.barda-refusal[b-deipcac6vu] {
    color: var(--dnd-red-text);
    background: rgba(138, 42, 42, 0.14);
    border: 1px solid rgba(138, 42, 42, 0.5);
    border-radius: 3px;
    padding: 8px 10px;
}

.barda-refusal b[b-deipcac6vu] {
    display: block;
    font-family: 'Cinzel', serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 3px;
}

.tavern-detail-foot[b-deipcac6vu] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    padding-top: 11px;
    border-top: 1px solid var(--dnd-border);
    font-size: 13px;
    color: var(--dnd-ink-dim);
    font-variant-numeric: tabular-nums;
}

.tavern-detail-charges[b-deipcac6vu] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 11px;
    background: var(--dnd-bg-3);
    border: 1px solid var(--dnd-border);
    border-radius: 3px;
}

.tavern-detail-charges-count[b-deipcac6vu] {
    font-family: 'Cinzel', serif;
    font-size: 17px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--dnd-gold-bright);
}

.tavern-detail-charges-label[b-deipcac6vu] {
    flex: 1 1 auto;
    font-size: 12px;
    color: var(--dnd-ink-dim);
}

.tavern-detail-charges-actions[b-deipcac6vu] {
    display: flex;
    gap: 5px;
}

/* ---- Le pied : quantité, actions, fermeture ---- */
.barda-dialog-error[b-deipcac6vu] {
    padding: 0 20px;
}

.barda-dialog-actions[b-deipcac6vu] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 13px 20px;
    border-top: 1px solid var(--dnd-border);
    background: rgba(0, 0, 0, 0.18);
}

.barda-dialog-spacer[b-deipcac6vu] {
    flex: 1;
}

.barda-qty-editor[b-deipcac6vu] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.barda-qty-editor input[b-deipcac6vu] {
    width: 80px;
}

.barda-veil-name[b-deipcac6vu] {
    max-width: 220px;
}

.barda-confirm[b-deipcac6vu] {
    font-size: 13px;
    color: var(--dnd-red-text);
}
/* /Components/Characters/CalculatedValueIndicator.razor.rz.scp.css */
/* Une valeur dérivée se signale sans crier : elle reste lisible comme une valeur ordinaire, et
   c'est le survol qui livre le détail. */
.tavern-calculated[b-0fjxgax43j] {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    font-variant-numeric: tabular-nums;
}

/* Quand l'équipement y change quelque chose, la valeur passe en doré : c'est le seul signal
   nécessaire pour qu'on pense à survoler. */
.tavern-calculated.modified[b-0fjxgax43j] {
    color: var(--dnd-gold-bright);
    cursor: help;
}

.tavern-calculated-mark[b-0fjxgax43j] {
    font-size: 0.6em;
    line-height: 1;
    color: var(--dnd-gold);
}
/* /Components/Characters/CharacterBarda.razor.rz.scp.css */
/* La silhouette et le sac côte à côte sur large écran, l'un sous l'autre sinon. La colonne de
   silhouette passe de 292 à 460 px (ancien .tavern-equipment 292, puis 356 en S12-T06) : les
   rails restent fixes à 62 px, donc élargir cette colonne va tout à l'avatar, pas à eux. */
.barda[b-ctcs4pmdqx] {
    display: grid;
    grid-template-columns: 460px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

/* .tavern-panel (dnd-theme.css) n'est qu'une coquille sans marge interieure — chaque panneau
   pose la sienne, comme les autres cartes de la fiche (CharacterHitPointsCard, etc.). Elle
   manquait ici : le contenu touchait le bord du panneau au lieu de respirer comme la maquette. */
.barda-doll[b-ctcs4pmdqx] {
    position: relative;
    padding: 18px 22px;
}

/* ---- Bandeau de panneau, partagé par la silhouette et le sac ---- */
.tavern-doll-head[b-ctcs4pmdqx] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--dnd-border);
}

.tavern-doll-title[b-ctcs4pmdqx] {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--dnd-gold);
}

.tavern-doll-hint[b-ctcs4pmdqx] {
    font-size: 12px;
    color: var(--dnd-ink-faint);
}

/* ---- Les deux rails et la silhouette ---- */
.tavern-doll-board[b-ctcs4pmdqx] {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr) 62px;
    gap: 8px;
    padding-top: 14px;
}

.tavern-doll-rail[b-ctcs4pmdqx] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/*
 * L'avatar de race porte sa propre lumière plutôt qu'un cadre posé derrière lui. Le dessin est
 * une ligne dorée sur des aplats sombres : posé tel quel sur le panneau noir, il s'y noie.
 *
 * Une niche éclairée (fond clair en arche) a été essayée et jetée : elle détachait le
 * personnage, mais posait une boîte lumineuse au milieu d'une colonne sombre — un corps
 * étranger, avec un bord à raccorder au reste. Le halo obtient la même lisibilité sans rien
 * délimiter : deux drop-shadow gris clair épousent la silhouette (un rayon court qui détache
 * la ligne, un long qui pose l'aura), au-dessus d'une nappe radiale très diluée en ::before.
 */
.barda-figure[b-ctcs4pmdqx] {
    position: relative;
    z-index: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 420px;
}

.barda-figure[b-ctcs4pmdqx]::before {
    content: "";
    position: absolute;
    left: -24%;
    right: -24%;
    top: 1%;
    bottom: -5%;
    border-radius: 50%;
    background: radial-gradient(ellipse 56% 50% at 50% 47%,
        rgba(228, 224, 216, 0.16) 0%,
        rgba(216, 208, 192, 0.08) 42%,
        rgba(184, 170, 144, 0.028) 66%,
        rgba(184, 170, 144, 0) 80%);
    pointer-events: none;
}

.barda-avatar[b-ctcs4pmdqx] {
    position: relative;
    width: 100%;
    max-width: 280px;
    height: auto;
    user-select: none;
    -webkit-user-drag: none;
    filter:
        drop-shadow(0 0 6px rgba(236, 231, 220, 0.32))
        drop-shadow(0 0 22px rgba(214, 205, 186, 0.18));
}

.barda-figure svg[b-ctcs4pmdqx] {
    width: 100%;
    max-width: 210px;
    height: auto;
    opacity: 0.5;
    color: var(--dnd-border-strong);
}

/* ---- Un emplacement ---- */
.tavern-slot[b-ctcs4pmdqx] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    padding: 0;
    background: var(--dnd-bg-3);
    border: 1px solid var(--dnd-border);
    border-radius: 3px;
    color: var(--dnd-ink-dim);
    cursor: pointer;
    transition: border-color 120ms ease, transform 120ms ease;
}

.tavern-slot:hover[b-ctcs4pmdqx],
.tavern-slot:focus-visible[b-ctcs4pmdqx] {
    border-color: var(--dnd-border-strong);
    transform: translateY(-1px);
    outline: none;
}

.tavern-slot:focus-visible[b-ctcs4pmdqx] {
    box-shadow: 0 0 0 2px var(--dnd-gold);
}

.tavern-slot.filled[b-ctcs4pmdqx] {
    border-width: 2px;
}

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

/* Au-dela de « rare », la case diffuse un halo de sa couleur vers l'interieur (D7, S12-T12) :
   le seul effet ajoute, et il porte une information (rien en dessous de ce palier). Pas de
   .filled dans le selecteur : data-rarity n'est jamais pose sur une case vide (SlotRarity ne le
   fournit qu'avec un objet porte), .filled y serait redondant et grimperait la specificite
   au-dessus de .selected juste en dessous, qui doit rester lisible sur un objet tres rare. */
.tavern-slot[data-rarity="veryrare"][b-ctcs4pmdqx] { box-shadow: inset 0 0 16px -4px var(--dnd-gold); }
.tavern-slot[data-rarity="legendary"][b-ctcs4pmdqx] { box-shadow: inset 0 0 16px -4px var(--dnd-gold-bright); }
.tavern-slot[data-rarity="artifact"][b-ctcs4pmdqx] { box-shadow: inset 0 0 16px -4px var(--dnd-red-text); }

/* Apres le halo dans la cascade, a specificite egale (2 selecteurs simples de chaque cote) :
   l'ordre du fichier tranche, et la selection l'emporte sur son propre halo. */
.tavern-slot.selected[b-ctcs4pmdqx] {
    box-shadow: 0 0 0 1px var(--dnd-gold-bright), 0 0 14px rgba(232, 196, 104, 0.22);
}

.tavern-slot-glyph[b-ctcs4pmdqx] {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dnd-ink);
}

/* Case vide : le pictogramme de ce qui pourrait s'y poser, en creux plutot qu'absent. */
.tavern-slot.empty .tavern-glyph[b-ctcs4pmdqx],
.tavern-slot.empty .tavern-glyph-fallback[b-ctcs4pmdqx] {
    opacity: 0.42;
}

.tavern-slot-attuned[b-ctcs4pmdqx] {
    position: absolute;
    right: -5px;
    bottom: -5px;
    width: 17px;
    height: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dnd-panel-1);
    border: 1px solid var(--dnd-gold);
    border-radius: 50%;
    color: var(--dnd-gold-bright);
    font-size: 10px;
    line-height: 1;
}

/* ---- Les mains et le blason ---- */
/* Cinq colonnes : tir secondaire, mêlée secondaire, blason, mêlée principale, tir principal. Les
   deux emplacements d'une même main restent groupés visuellement de part et d'autre du blason —
   une arme à deux mains de mêlée et une arme à deux mains de trait (arc) ne se gênent pas, comme
   dans Baldur's Gate 3. */
.tavern-doll-hands[b-ctcs4pmdqx] {
    display: grid;
    grid-template-columns: 62px 62px minmax(0, 1fr) 62px 62px;
    gap: 12px;
    align-items: end;
    /* Marge sous les pieds de l'avatar, avant le blason de CA : sans elle le personnage se
       retrouve tasse contre les mains au lieu de se tenir debout dans sa colonne. */
    padding-top: 30px;
}

.tavern-doll-hand[b-ctcs4pmdqx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.tavern-doll-hand-label[b-ctcs4pmdqx] {
    font-family: 'Cinzel', serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
    color: var(--dnd-ink-faint);
}

.tavern-ac[b-ctcs4pmdqx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0;
    background: none;
    border: none;
    color: var(--dnd-gold);
    cursor: pointer;
}

.tavern-ac:focus-visible[b-ctcs4pmdqx] {
    outline: 2px solid var(--dnd-gold);
    outline-offset: 4px;
}

.tavern-ac-shield[b-ctcs4pmdqx] {
    position: relative;
    width: 68px;
    height: 78px;
}

.tavern-ac-shield svg[b-ctcs4pmdqx] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.tavern-ac-value[b-ctcs4pmdqx] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 8px;
    font-family: 'Cinzel', serif;
    font-size: 27px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--dnd-gold-bright);
}

.tavern-ac-caption[b-ctcs4pmdqx] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Cinzel', serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--dnd-label-gold);
}

.tavern-ac-mode[b-ctcs4pmdqx] {
    padding: 1px 5px;
    border: 1px solid var(--dnd-border-strong);
    border-radius: 2px;
    font-size: 8px;
    color: var(--dnd-ink-dim);
}

/* ---- Le détail du calcul de CA ---- */
.tavern-ac-breakdown[b-ctcs4pmdqx] {
    margin-top: 12px;
    padding: 11px 13px;
    background: var(--dnd-bg-3);
    border: 1px solid var(--dnd-border);
    border-radius: 3px;
}

.tavern-ac-breakdown dl[b-ctcs4pmdqx] {
    margin: 0;
}

.tavern-ac-line[b-ctcs4pmdqx] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
}

.tavern-ac-line dt[b-ctcs4pmdqx] {
    font-weight: 400;
    color: var(--dnd-ink-dim);
}

.tavern-ac-line dd[b-ctcs4pmdqx] {
    margin: 0;
    font-variant-numeric: tabular-nums;
    color: var(--dnd-ink);
}

.tavern-ac-total[b-ctcs4pmdqx] {
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid var(--dnd-border);
}

.tavern-ac-total dt[b-ctcs4pmdqx],
.tavern-ac-total dd[b-ctcs4pmdqx] {
    color: var(--dnd-gold-bright);
}

.tavern-ac-formula[b-ctcs4pmdqx] {
    margin: 8px 0 0;
    font-size: 12px;
    font-style: italic;
    color: var(--dnd-ink-faint);
}

/* ---- La babiole : le seul emplacement qui en accepte plusieurs ---- */
.tavern-doll-tray[b-ctcs4pmdqx] {
    margin-top: 14px;
    padding-top: 11px;
    border-top: 1px dashed var(--dnd-border);
}

.tavern-doll-tray-head[b-ctcs4pmdqx] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.tavern-doll-tray-title[b-ctcs4pmdqx] {
    font-family: 'Cinzel', serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--dnd-label-gold);
}

.tavern-doll-tray-hint[b-ctcs4pmdqx] {
    font-size: 11px;
    font-style: italic;
    color: var(--dnd-ink-faint);
}

.tavern-doll-tray-slots[b-ctcs4pmdqx] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tavern-slot-add .tavern-slot-glyph[b-ctcs4pmdqx] {
    font-size: 20px;
    font-weight: 400;
    color: var(--dnd-ink-faint);
}

/* ---- Le bandeau du bas ---- */
.tavern-doll-footer[b-ctcs4pmdqx] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-top: 14px;
    padding-top: 11px;
    border-top: 1px solid var(--dnd-border);
}

.tavern-doll-stat[b-ctcs4pmdqx] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 13px;
}

.tavern-doll-stat .k[b-ctcs4pmdqx] {
    font-family: 'Cinzel', serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dnd-label-gold);
}

.tavern-doll-stat .v[b-ctcs4pmdqx] {
    font-variant-numeric: tabular-nums;
    color: var(--dnd-ink);
}

.tavern-doll-stat .v.full[b-ctcs4pmdqx],
.tavern-doll-stat .v.warn[b-ctcs4pmdqx] {
    color: var(--dnd-red-text);
}

/* ==================== Le sac ==================== */
.barda-bag[b-ctcs4pmdqx] {
    display: flex;
    flex-direction: column;
    padding: 18px 22px;
}

.barda-purse[b-ctcs4pmdqx] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
}

.barda-coin[b-ctcs4pmdqx] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    background: var(--dnd-bg-3);
    border: 1px solid var(--dnd-border);
    border-radius: 3px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--dnd-ink);
}

.barda-coin b[b-ctcs4pmdqx] {
    font-family: 'Cinzel', serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--dnd-label-gold);
}

.barda-purse-editor[b-ctcs4pmdqx] {
    margin-top: 8px;
}

.barda-searchrow[b-ctcs4pmdqx] {
    margin-top: 10px;
}

.barda-chips[b-ctcs4pmdqx] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 10px;
}

.barda-chip[b-ctcs4pmdqx] {
    padding: 4px 11px;
    background: none;
    border: 1px solid var(--dnd-border);
    border-radius: 999px;
    font-family: 'Cinzel', serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--dnd-ink-faint);
    cursor: pointer;
}

.barda-chip:hover[b-ctcs4pmdqx] {
    color: var(--dnd-ink);
    border-color: var(--dnd-border-strong);
}

.barda-chip.on[b-ctcs4pmdqx] {
    background: rgba(201, 162, 39, 0.14);
    border-color: var(--dnd-gold);
    color: var(--dnd-gold-bright);
}

.barda-chip:focus-visible[b-ctcs4pmdqx] {
    outline: 2px solid var(--dnd-gold);
    outline-offset: 2px;
}

.barda-rows[b-ctcs4pmdqx] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 12px;
    max-height: 560px;
    overflow-y: auto;
    padding-right: 3px;
}

.barda-group-label[b-ctcs4pmdqx] {
    font-family: 'Cinzel', serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dnd-ink-faint);
    padding: 10px 2px 3px;
    border-bottom: 1px dashed var(--dnd-border);
    margin-bottom: 2px;
}

.barda-empty-note[b-ctcs4pmdqx] {
    color: var(--dnd-ink-faint);
    font-style: italic;
    text-align: center;
    padding: 22px 0;
    margin: 0;
}

.barda-row[b-ctcs4pmdqx] {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    width: 100%;
    text-align: left;
    border: 1px solid transparent;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.18);
    color: var(--dnd-ink);
    padding: 7px 9px;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
}

.barda-row:hover[b-ctcs4pmdqx] {
    background: rgba(107, 92, 66, 0.16);
    border-color: var(--dnd-border);
}

.barda-row.selected[b-ctcs4pmdqx] {
    border-color: var(--dnd-gold);
    background: rgba(201, 162, 39, 0.11);
}

.barda-row:focus-visible[b-ctcs4pmdqx] {
    outline: 2px solid var(--dnd-gold);
    outline-offset: 1px;
}

.barda-row.veiled .barda-row-name[b-ctcs4pmdqx] {
    font-style: italic;
    color: var(--dnd-ink-dim);
}

.barda-row-badge[b-ctcs4pmdqx] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 20px;
    height: 20px;
    padding: 4px;
    box-sizing: content-box;
    border-radius: 3px;
    border: 1px solid var(--dnd-border);
    background: rgba(0, 0, 0, 0.3);
    color: var(--dnd-ink-dim);
}

.barda-row-main[b-ctcs4pmdqx] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.barda-row-name[b-ctcs4pmdqx] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.barda-row-sub[b-ctcs4pmdqx] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--dnd-ink-faint);
    flex-wrap: wrap;
}

.barda-dot[b-ctcs4pmdqx] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
}

.barda-dot[data-rarity="common"][b-ctcs4pmdqx] { background: var(--dnd-ink-dim); }
.barda-dot[data-rarity="uncommon"][b-ctcs4pmdqx] { background: var(--dnd-green-text); }
.barda-dot[data-rarity="rare"][b-ctcs4pmdqx] { background: var(--dnd-blue-text); }
.barda-dot[data-rarity="veryrare"][b-ctcs4pmdqx] { background: var(--dnd-gold); }
.barda-dot[data-rarity="legendary"][b-ctcs4pmdqx] { background: var(--dnd-gold-bright); }
.barda-dot[data-rarity="artifact"][b-ctcs4pmdqx] { background: var(--dnd-red-text); }

.barda-worn-chip[b-ctcs4pmdqx] {
    font-family: 'Cinzel', serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.03em;
    border: 1px solid var(--dnd-gold);
    color: var(--dnd-gold-bright);
    border-radius: 999px;
    padding: 1px 7px;
    background: rgba(201, 162, 39, 0.12);
}

.barda-homeless-chip[b-ctcs4pmdqx] {
    font-family: 'Cinzel', serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.03em;
    border: 1px solid var(--dnd-red);
    color: var(--dnd-red-text);
    border-radius: 999px;
    padding: 1px 7px;
    background: rgba(138, 42, 42, 0.16);
}

.barda-qty[b-ctcs4pmdqx] {
    font-variant-numeric: tabular-nums;
    color: var(--dnd-ink-dim);
    font-size: 12px;
}

.barda-addbar[b-ctcs4pmdqx] {
    margin-top: 12px;
}

/* Masques par defaut, montres sous 780 px : le nom sous le pictogramme (aucun survol au pouce)
   et les trois sous-onglets qui remplacent l'empilement des deux colonnes (S12-T13). */
.tavern-slot-name[b-ctcs4pmdqx] {
    display: none;
}

.barda-mobile-tabs[b-ctcs4pmdqx] {
    display: none;
}

/* Sous 780 px la silhouette disparaît : le site est utilisé en séance sur téléphone, et deux
   rails de 62 px encadrant une figure n'y tiennent pas (grille tactile en S12-T13). */
@media (max-width: 780px) {
    .barda[b-ctcs4pmdqx] {
        grid-template-columns: minmax(0, 1fr);
    }

    .barda-mobile-tabs[b-ctcs4pmdqx] {
        display: flex;
        gap: 6px;
        margin-bottom: 12px;
    }

    .barda-mobile-tab[b-ctcs4pmdqx] {
        flex: 1;
        min-height: 44px;
        border: 1px solid var(--dnd-border);
        border-radius: 6px;
        background: var(--dnd-bg-3);
        color: var(--dnd-ink-dim);
        font-family: 'Cinzel', serif;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        cursor: pointer;
    }

    .barda-mobile-tab.on[b-ctcs4pmdqx] {
        border-color: var(--dnd-gold-bright);
        color: var(--dnd-gold-bright);
        background: rgba(201, 162, 39, 0.14);
    }

    /* Un seul des trois panneaux a la fois : le sac reste la verite unique (D1), seul l'affichage
       se replie — aucune donnee, aucun filtre n'est perdu en changeant de sous-onglet. */
    [data-mobile-section][b-ctcs4pmdqx] {
        display: none;
    }

    .barda[data-mobile-tab="porte"] [data-mobile-section="porte"][b-ctcs4pmdqx] {
        display: block;
    }

    .barda[data-mobile-tab="sac"] [data-mobile-section="sac"][b-ctcs4pmdqx] {
        display: block;
    }

    .barda[data-mobile-tab="bourse"] [data-mobile-section="bourse"][b-ctcs4pmdqx] {
        display: block;
    }

    /* « Porté » devient une grille de cases 4 colonnes, nom sous le pictogramme. */
    .tavern-doll-board[b-ctcs4pmdqx] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
    }

    .tavern-doll-rail[b-ctcs4pmdqx] {
        display: contents;
    }

    .barda-figure[b-ctcs4pmdqx] {
        display: none;
    }

    .tavern-doll-hands[b-ctcs4pmdqx] {
        grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
        align-items: start;
    }

    .tavern-ac[b-ctcs4pmdqx] {
        grid-column: 1 / -1;
        flex-direction: row;
        gap: 12px;
        padding-top: 8px;
    }

    .tavern-slot[b-ctcs4pmdqx] {
        width: 100%;
        height: auto;
        min-height: 64px;
        flex-direction: column;
        gap: 3px;
        padding: 7px 3px;
    }

    .tavern-slot-name[b-ctcs4pmdqx] {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 9px;
        line-height: 1.15;
        text-align: center;
        color: var(--dnd-ink-faint);
    }

    .tavern-slot.empty .tavern-slot-name[b-ctcs4pmdqx] {
        opacity: 0.68;
    }

    /* Cible tactile de 44 px minimum sur les lignes du sac (S12-T13). */
    .barda-row[b-ctcs4pmdqx] {
        min-height: 44px;
        padding: 9px 9px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tavern-slot[b-ctcs4pmdqx] {
        transition: none;
    }
}

/* ==================== L'apercu au survol (S12-T09) ==================== */
/* L'element est cree par CharacterBarda.razor.js et ajoute dans la racine du composant, pas
   document.body : ::deep porte le CSS scope de Blazor jusqu'a un descendant construit hors du
   rendu Razor (meme patron que ::deep .map-marker-tooltip dans MapExplorer.razor.css). */
[b-ctcs4pmdqx] .barda-tip {
    position: fixed;
    z-index: 60;
    width: 264px;
    pointer-events: none;
    border: 1px solid var(--dnd-border-strong);
    border-radius: 3px;
    background: linear-gradient(180deg, #221C15 0%, #14110F 100%);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.6);
    padding: 11px 13px;
    opacity: 0;
    transform: translateY(3px);
    transition: opacity 120ms ease, transform 120ms ease;
}

[b-ctcs4pmdqx] .barda-tip.on {
    opacity: 1;
    transform: translateY(0);
}

[b-ctcs4pmdqx] .barda-tip-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}

[b-ctcs4pmdqx] .barda-tip-glyph {
    flex: none;
    width: 28px;
    height: 28px;
}

[b-ctcs4pmdqx] .barda-tip-name {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
}

[b-ctcs4pmdqx] .barda-tip-sub {
    display: block;
    font-size: 12px;
    color: var(--dnd-ink-faint);
    margin: 2px 0 7px;
}

[b-ctcs4pmdqx] .barda-tip-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 7px;
}

[b-ctcs4pmdqx] .barda-tip-chip {
    font-size: 11px;
    border: 1px solid var(--dnd-border);
    border-radius: 2px;
    padding: 1px 6px;
    color: var(--dnd-ink-dim);
}

[b-ctcs4pmdqx] .barda-tip-foot {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
    color: var(--dnd-ink-faint);
    border-top: 1px dashed var(--dnd-border);
    padding-top: 6px;
    font-variant-numeric: tabular-nums;
}

@media (hover: none) {
    [b-ctcs4pmdqx] .barda-tip {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    [b-ctcs4pmdqx] .barda-tip {
        transition: none;
    }
}
/* /Components/Characters/CharacterBioPanel.razor.rz.scp.css */
.tavern-bio-grid[b-skaqworjne] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.tavern-bio-backstory[b-skaqworjne] {
    grid-column: 1 / -1;
}

@media (max-width: 640px) {
    .tavern-bio-grid[b-skaqworjne] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Characters/CharacterCombatStatsCard.razor.rz.scp.css */
.tavern-combat-stats-card[b-tkp7r661tj] {
    padding: 12px 18px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.tavern-combat-stats-item[b-tkp7r661tj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 60px;
}

.tavern-combat-stats-value[b-tkp7r661tj] {
    font-family: 'Cinzel', serif;
    font-size: 15px;
    color: var(--dnd-ink);
}

.tavern-combat-stats-label[b-tkp7r661tj] {
    font-size: 11px;
    color: var(--dnd-ink-dim);
}

.tavern-combat-stats-edit[b-tkp7r661tj] {
    background: transparent;
    border: none;
    padding: 0 0 0 4px;
    color: var(--dnd-ink-faint);
    font-size: 14px;
    cursor: pointer;
    align-self: flex-start;
}

.tavern-combat-stats-edit:hover[b-tkp7r661tj] {
    color: var(--dnd-gold-bright);
}

.tavern-combat-stats-editor[b-tkp7r661tj] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-around;
    gap: 12px;
    width: 100%;
}

.tavern-combat-stats-editor .tavern-combat-stats-item[b-tkp7r661tj] {
    gap: 4px;
}

.tavern-combat-stats-editor input[b-tkp7r661tj] {
    width: 76px;
    text-align: center;
}

/* Le choix du mode de classe d'armure et son bonus de circonstance, sous les trois champs
   chiffrés : ce sont des réglages, pas des valeurs qu'on modifie à chaque séance. */
.tavern-armor-class-mode[b-tkp7r661tj] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1 1 240px;
    min-width: 200px;
}

.tavern-temp-bonus-row[b-tkp7r661tj] {
    display: flex;
    gap: 6px;
}

.tavern-temp-bonus-row input[type="number"][b-tkp7r661tj] {
    flex: 0 0 72px;
}

.tavern-temp-bonus-row input[type="text"][b-tkp7r661tj] {
    flex: 1 1 auto;
    min-width: 0;
}
/* /Components/Characters/CharacterHitPointsCard.razor.rz.scp.css */
.tavern-hp-card[b-i492dsql20] {
    padding: 18px 22px;
}

.tavern-hp-value[b-i492dsql20] {
    font-family: 'Cinzel', serif;
    font-size: 18px;
    color: var(--dnd-ink);
}

.tavern-hp-temp[b-i492dsql20] {
    color: var(--dnd-blue);
    font-size: 13px;
    margin-left: 6px;
}

.tavern-hp-bar[b-i492dsql20] {
    height: 10px;
    border-radius: 999px;
    background: var(--dnd-bg-2);
    border: 1px solid var(--dnd-border);
    overflow: hidden;
}

.tavern-hp-bar-fill[b-i492dsql20] {
    height: 100%;
}

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

.tavern-hp-amount-stepper button[b-i492dsql20] {
    width: 30px;
    height: 30px;
    background: transparent;
    border: none;
    color: var(--dnd-ink);
    cursor: pointer;
}

.tavern-hp-amount-input[b-i492dsql20] {
    width: 46px;
    text-align: center;
    font-family: 'Cinzel', serif;
    font-size: 14px;
    background: transparent;
    border: none;
    border-left: 1px solid var(--dnd-border);
    border-right: 1px solid var(--dnd-border);
    color: var(--dnd-ink);
    padding: 4px 0;
    -moz-appearance: textfield;
}

/* Les flèches natives feraient doublon avec les boutons − et + du stepper. */
.tavern-hp-amount-input[b-i492dsql20]::-webkit-outer-spin-button,
.tavern-hp-amount-input[b-i492dsql20]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.tavern-hp-amount-input:focus[b-i492dsql20] {
    outline: none;
    background: var(--dnd-bg-2);
}

.tavern-hp-max-edit[b-i492dsql20] {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
}

.tavern-hp-max-pencil[b-i492dsql20] {
    color: var(--dnd-ink-faint);
    font-size: 13px;
    margin-left: 6px;
}

.tavern-hp-max-edit:hover .tavern-hp-max-pencil[b-i492dsql20] {
    color: var(--dnd-gold-bright);
}

.tavern-hp-max-input[b-i492dsql20] {
    width: 80px;
}
/* /Components/Characters/CharacterLevelCard.razor.rz.scp.css */
.tavern-level-card[b-ul7uaig0ya] {
    padding: 16px 22px;
}

.tavern-level-badge[b-ul7uaig0ya] {
    font-family: 'Cinzel', serif;
    font-size: 13px;
    color: var(--dnd-bg-2);
    background: var(--dnd-gold-bright);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tavern-xp-input[b-ul7uaig0ya] {
    width: 90px;
}

.tavern-xp-edit[b-ul7uaig0ya] {
    font-family: 'EB Garamond', serif;
    font-size: 13px;
    background: transparent;
    border: none;
    color: var(--dnd-ink);
    cursor: pointer;
    padding: 0;
}

.tavern-xp-edit:hover[b-ul7uaig0ya] {
    color: var(--dnd-gold-bright);
}

.tavern-level-bar[b-ul7uaig0ya] {
    height: 8px;
    border-radius: 999px;
    background: var(--dnd-bg-2);
    border: 1px solid var(--dnd-border);
    overflow: hidden;
}

.tavern-level-bar-fill[b-ul7uaig0ya] {
    height: 100%;
    background: linear-gradient(90deg, var(--dnd-gold) 0%, var(--dnd-gold-bright) 100%);
}
/* /Components/Characters/CharacterPersonalNotesTab.razor.rz.scp.css */
.tavern-personal-notes-input[b-2ecw10a74o] {
    font-family: 'EB Garamond', serif;
    font-size: 15px;
    line-height: 1.6;
    /* Redimensionnement vertical seulement : la largeur est celle de la fiche, l'élargir déborderait
       du panneau. */
    resize: vertical;
    min-height: 12rem;
}

.tavern-personal-notes-state[b-2ecw10a74o] {
    font-family: 'Cinzel', serif;
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--dnd-ink-faint);
    /* Hauteur réservée : l'état passe par une chaîne vide avant le premier enregistrement, et sans
       ça la première frappe décalerait le bloc-notes d'une ligne. */
    min-height: 1em;
}

.tavern-personal-notes-counter[b-2ecw10a74o] {
    font-size: 12px;
    color: var(--dnd-ink-faint);
}
/* /Components/Characters/CharacterPrintSheet.razor.rz.scp.css */
/* Fiche imprimable : uniquement visible a l'impression. Le rendu vise une economie d'encre
   maximale (fond blanc, aucun aplat, filets fins) tout en gardant l'identite de l'application :
   Cinzel pour les titres et les valeurs chiffrees, EB Garamond pour le corps, or en accent.

   Deux contraintes apprises a l'usage :
   - Cinzel ne possede pas de minuscules : toute valeur pouvant contenir des lettres (unites,
     "d12", "oui"/"non", conditions) passe en EB Garamond, sinon elle s'affiche en capitales.
   - Sous 0,8pt les filets disparaissent a l'impression : c'est le minimum utilise ici. */
.ps-sheet[b-g8cbrju1xv] {
    display: none;
}

@media print {
    .ps-sheet[b-g8cbrju1xv] {
        --ps-ink: #14110F;
        --ps-ink-soft: #45403A;
        --ps-ink-faint: #7E776B;
        --ps-gold: #8C6D22;
        --ps-rule: #BFA063;
        --ps-rule-soft: #D3BF93;

        display: block;
        font-family: 'EB Garamond', Georgia, serif;
        font-size: 10pt;
        line-height: 1.35;
        color: var(--ps-ink);
        background: none;
    }

    /* ---------- En-tete ---------- */

    .ps-header[b-g8cbrju1xv] {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .ps-crest[b-g8cbrju1xv] {
        width: 20mm;
        height: 20mm;
        flex: 0 0 auto;
        border-radius: 50%;
        border: 1pt solid var(--ps-rule);
        outline: 0.8pt solid var(--ps-rule-soft);
        outline-offset: 2px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'Cinzel', serif;
        font-size: 19pt;
        color: var(--ps-gold);
    }

    .ps-crest img[b-g8cbrju1xv] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .ps-identity[b-g8cbrju1xv] {
        flex: 1;
        min-width: 0;
    }

    .ps-eyebrow[b-g8cbrju1xv] {
        font-family: 'Cinzel', serif;
        font-size: 7pt;
        letter-spacing: 0.28em;
        text-transform: uppercase;
        color: var(--ps-gold);
    }

    .ps-name[b-g8cbrju1xv] {
        font-family: 'Cinzel', serif;
        font-size: 24pt;
        font-weight: 700;
        letter-spacing: 0.01em;
        line-height: 1.1;
        margin: 1px 0 0;
        color: var(--ps-ink);
    }

    .ps-meta[b-g8cbrju1xv] {
        font-size: 11pt;
        font-style: italic;
        color: var(--ps-ink-soft);
    }

    .ps-badges[b-g8cbrju1xv] {
        display: flex;
        gap: 6px;
        flex: 0 0 auto;
    }

    .ps-badge[b-g8cbrju1xv] {
        min-width: 18mm;
        text-align: center;
        border: 1pt solid var(--ps-rule);
        border-radius: 2px;
        padding: 3px 6px 4px;
    }

    .ps-badge-label[b-g8cbrju1xv] {
        display: block;
        font-size: 7pt;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--ps-gold);
    }

    .ps-badge-value[b-g8cbrju1xv] {
        display: block;
        font-family: 'Cinzel', serif;
        font-size: 14pt;
        font-weight: 700;
        line-height: 1.1;
    }

    /* Filet double avec losange central, repris du separateur decoratif de l'application. */
    .ps-divider[b-g8cbrju1xv] {
        display: flex;
        align-items: center;
        gap: 6px;
        margin: 8px 0 11px;
    }

    .ps-divider[b-g8cbrju1xv]::before,
    .ps-divider[b-g8cbrju1xv]::after {
        content: '';
        flex: 1;
        height: 3px;
        border-top: 1.2pt solid var(--ps-rule);
        border-bottom: 0.8pt solid var(--ps-rule-soft);
    }

    .ps-divider span[b-g8cbrju1xv]::before {
        content: '◆';
        font-size: 6.5pt;
        color: var(--ps-gold);
    }

    /* ---------- Caracteristiques ---------- */

    .ps-abilities[b-g8cbrju1xv] {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 6px;
        break-inside: avoid;
    }

    .ps-ability[b-g8cbrju1xv] {
        border: 1pt solid var(--ps-rule);
        border-radius: 3px;
        text-align: center;
        padding: 3px 2px 4px;
    }

    .ps-ability-name[b-g8cbrju1xv] {
        font-family: 'Cinzel', serif;
        font-size: 7pt;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--ps-gold);
    }

    .ps-ability-mod[b-g8cbrju1xv] {
        font-family: 'Cinzel', serif;
        font-size: 18pt;
        font-weight: 700;
        line-height: 1.05;
    }

    .ps-ability-score[b-g8cbrju1xv] {
        font-size: 8.5pt;
        color: var(--ps-ink-soft);
        border-top: 0.8pt solid var(--ps-rule-soft);
        margin: 2px 22% 0;
        padding-top: 2px;
    }

    .ps-ability-save[b-g8cbrju1xv] {
        font-size: 8pt;
        color: var(--ps-ink-soft);
        margin-top: 2px;
    }

    /* ---------- Bandeau de combat ---------- */

    .ps-stats[b-g8cbrju1xv] {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 0;
        margin: 9px 0 11px;
        border-top: 0.8pt solid var(--ps-rule);
        border-bottom: 0.8pt solid var(--ps-rule);
        break-inside: avoid;
    }

    .ps-stat[b-g8cbrju1xv] {
        text-align: center;
        padding: 5px 3px;
        border-left: 0.8pt solid var(--ps-rule-soft);
    }

    .ps-stat:first-child[b-g8cbrju1xv] {
        border-left: none;
    }

    .ps-stat-label[b-g8cbrju1xv] {
        display: block;
        font-size: 7pt;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--ps-gold);
    }

    .ps-stat-value[b-g8cbrju1xv] {
        display: block;
        font-family: 'Cinzel', serif;
        font-size: 14pt;
        font-weight: 700;
        line-height: 1.15;
    }

    .ps-stat-value small[b-g8cbrju1xv] {
        font-family: 'EB Garamond', Georgia, serif;
        font-size: 10pt;
        font-weight: 400;
        color: var(--ps-ink-soft);
    }

    /* ---------- Corps en deux colonnes ---------- */

    .ps-columns[b-g8cbrju1xv] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        align-items: start;
    }

    .ps-section-title[b-g8cbrju1xv] {
        display: flex;
        align-items: center;
        gap: 7px;
        font-family: 'Cinzel', serif;
        font-size: 8pt;
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--ps-gold);
        margin-bottom: 5px;
    }

    .ps-section-title[b-g8cbrju1xv]::after {
        content: '';
        flex: 1;
        border-top: 0.8pt solid var(--ps-rule);
    }

    .ps-spaced[b-g8cbrju1xv] {
        margin-top: 10px;
    }

    /* Lignes a pointilles de conduite, reutilisees par les competences, l'etat et l'inventaire. */
    .ps-row[b-g8cbrju1xv] {
        display: flex;
        align-items: baseline;
        gap: 5px;
        font-size: 9.5pt;
        padding: 1.5px 0;
    }

    .ps-row.muted[b-g8cbrju1xv] {
        color: var(--ps-ink-faint);
    }

    .ps-row-label[b-g8cbrju1xv] {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Filet de conduite plein : les bordures pointillees fines sont ignorees par les moteurs
       d'impression, seul un trait continu ressort. */
    .ps-leader[b-g8cbrju1xv] {
        flex: 1;
        border-bottom: 0.8pt solid var(--ps-rule-soft);
        transform: translateY(-2px);
        min-width: 10px;
    }

    .ps-row-value[b-g8cbrju1xv] {
        font-family: 'Cinzel', serif;
        font-size: 9pt;
        font-weight: 700;
        white-space: nowrap;
    }

    /* Cinzel n'a pas de minuscules : les valeurs textuelles restent en EB Garamond. */
    .ps-row-value.ps-text[b-g8cbrju1xv] {
        font-family: 'EB Garamond', Georgia, serif;
        font-size: 9.5pt;
        font-weight: 600;
        white-space: normal;
    }

    .ps-row.muted .ps-row-value[b-g8cbrju1xv] {
        font-weight: 400;
    }

    /* Les navigateurs n'impriment pas les aplats sans "imprimer les arriere-plans" : les
       pastilles pleines sont obtenues par une bordure epaisse, toujours imprimee. */
    .ps-dot[b-g8cbrju1xv] {
        flex: 0 0 auto;
        box-sizing: border-box;
        width: 5.5pt;
        height: 5.5pt;
        border-radius: 50%;
        border: 0.8pt solid var(--ps-rule);
        display: inline-block;
        transform: translateY(-0.5pt);
    }

    .ps-dot.on[b-g8cbrju1xv] {
        border: 2.75pt solid var(--ps-gold);
    }

    .ps-dot.expert[b-g8cbrju1xv] {
        border: 2.75pt solid var(--ps-gold);
        outline: 0.8pt solid var(--ps-gold);
        outline-offset: 1pt;
    }

    .ps-legend[b-g8cbrju1xv] {
        margin-top: 5px;
        font-size: 7.5pt;
        font-style: italic;
        color: var(--ps-ink-faint);
    }

    .ps-legend .ps-dot[b-g8cbrju1xv] {
        margin: 0 2px 0 6px;
    }

    .ps-legend .ps-dot:first-child[b-g8cbrju1xv] {
        margin-left: 0;
    }

    .ps-prose[b-g8cbrju1xv] {
        font-size: 9pt;
        line-height: 1.45;
        color: var(--ps-ink-soft);
    }

    /* ---------- Emplacements de sorts ---------- */

    .ps-slot-row[b-g8cbrju1xv] {
        display: flex;
        align-items: center;
        gap: 7px;
        padding: 2px 0;
    }

    .ps-slot-level[b-g8cbrju1xv] {
        width: 14mm;
        flex: 0 0 auto;
        font-size: 8.5pt;
        color: var(--ps-ink-soft);
    }

    .ps-slot-boxes[b-g8cbrju1xv] {
        display: flex;
        gap: 3px;
        flex-wrap: wrap;
    }

    /* Cases a cocher : le joueur peut les rayer en partie sans reimprimer la fiche. */
    .ps-box[b-g8cbrju1xv] {
        width: 8pt;
        height: 8pt;
        border: 0.8pt solid var(--ps-rule);
        border-radius: 1.5px;
        display: inline-block;
        position: relative;
    }

    .ps-box.used[b-g8cbrju1xv]::after {
        content: '';
        position: absolute;
        inset: 1pt;
        border-top: 0.8pt solid var(--ps-gold);
        transform: rotate(45deg);
    }

    /* ---------- Sorts ---------- */

    .ps-spell-group[b-g8cbrju1xv] {
        display: flex;
        gap: 7px;
        padding: 2px 0;
        font-size: 9pt;
        break-inside: avoid;
    }

    .ps-spell-level[b-g8cbrju1xv] {
        width: 17mm;
        flex: 0 0 auto;
        font-family: 'Cinzel', serif;
        font-size: 7.5pt;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--ps-gold);
        padding-top: 1pt;
    }

    .ps-spell-list[b-g8cbrju1xv] {
        flex: 1;
    }

    .ps-spell:not(.prepared)[b-g8cbrju1xv] {
        font-style: italic;
        color: var(--ps-ink-faint);
    }

    .ps-spell + .ps-spell[b-g8cbrju1xv]::before {
        content: ' · ';
        font-style: normal;
        color: var(--ps-rule);
    }

    /* ---------- Bourse et inventaire ---------- */

    .ps-purse-block[b-g8cbrju1xv] {
        margin-top: 11px;
        break-inside: avoid;
    }

    .ps-purse[b-g8cbrju1xv] {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 6px;
    }

    .ps-coin[b-g8cbrju1xv] {
        display: flex;
        align-items: baseline;
        justify-content: center;
        gap: 6px;
        border: 0.8pt solid var(--ps-rule-soft);
        border-radius: 2px;
        padding: 3px 4px;
    }

    .ps-coin-label[b-g8cbrju1xv] {
        font-size: 7.5pt;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--ps-gold);
    }

    .ps-coin-value[b-g8cbrju1xv] {
        font-family: 'Cinzel', serif;
        font-size: 11pt;
        font-weight: 700;
    }

    .ps-inventory-block[b-g8cbrju1xv] {
        margin-top: 11px;
    }

    .ps-inventory[b-g8cbrju1xv] {
        columns: 2;
        column-gap: 16px;
    }

    .ps-inventory .ps-row[b-g8cbrju1xv] {
        break-inside: avoid;
    }

    .ps-flags[b-g8cbrju1xv] {
        font-size: 7.5pt;
        letter-spacing: 0.04em;
        color: var(--ps-gold);
        white-space: nowrap;
    }

    /* ---------- Notes et pied de page ---------- */

    .ps-notes[b-g8cbrju1xv] {
        margin-top: 11px;
        break-inside: avoid;
    }

    .ps-notes-lines[b-g8cbrju1xv] {
        padding-top: 2mm;
    }

    /* Reglure : la hauteur vient du bloc lui-meme, un span vide sans hauteur ne
       tracerait aucun filet. */
    .ps-notes-lines span[b-g8cbrju1xv] {
        display: block;
        height: 7mm;
        border-bottom: 0.8pt solid var(--ps-rule-soft);
    }

    .ps-footer[b-g8cbrju1xv] {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin-top: 10px;
        padding-top: 6px;
        border-top: 0.8pt solid var(--ps-rule-soft);
        font-size: 7.5pt;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--ps-ink-faint);
    }

    .ps-footer-mark[b-g8cbrju1xv] {
        font-size: 5.5pt;
        color: var(--ps-gold);
    }
}
/* /Components/Characters/CharacterRollCalculator.razor.rz.scp.css */
.tavern-roll-d20-input[b-8uw8pg673g] {
    width: 80px;
    text-align: center;
    font-family: 'Cinzel', serif;
    font-size: 17px;
}

.tavern-roll-total[b-8uw8pg673g] {
    font-family: 'Cinzel', serif;
    font-size: 22px;
    color: var(--dnd-gold-bright);
}

.tavern-roll-history-row[b-8uw8pg673g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid var(--dnd-border);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.15);
}

/* Les dégâts s'annoncent à côté du jet d'attaque : ce n'est pas un jet de d20, mais c'est ce
   qu'on lance juste après quand l'attaque passe. */
.tavern-roll-damage[b-8uw8pg673g] {
    font-size: 14px;
    color: var(--dnd-gold-bright);
    font-variant-numeric: tabular-nums;
}
/* /Components/Characters/CharacterSkillsCard.razor.rz.scp.css */
.tavern-skills-card[b-kyen3fkkma] {
    padding: 18px 22px;
}

.tavern-skills-grid[b-kyen3fkkma] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px 20px;
}

@media (max-width: 575.98px) {
    .tavern-skills-grid[b-kyen3fkkma] {
        grid-template-columns: 1fr;
    }
}

.tavern-skill-row[b-kyen3fkkma] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px dashed var(--dnd-border);
    background: transparent;
    border-left: none;
    border-right: none;
    border-top: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
}

.tavern-skill-name-group[b-kyen3fkkma] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tavern-skill-dot[b-kyen3fkkma] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: 1px solid var(--dnd-ink-faint);
    flex-shrink: 0;
}

.tavern-skill-dot.proficient[b-kyen3fkkma] {
    background: var(--dnd-gold);
    border-color: var(--dnd-gold);
}

.tavern-skill-dot.expertise[b-kyen3fkkma] {
    background: var(--dnd-gold-bright);
    border-color: var(--dnd-gold-bright);
    box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.25);
}

.tavern-skill-name[b-kyen3fkkma] {
    font-size: 14px;
    color: var(--dnd-ink-dim);
}

.tavern-skill-name.proficient[b-kyen3fkkma] {
    color: var(--dnd-ink);
}

.tavern-skill-ability[b-kyen3fkkma] {
    font-size: 11px;
    color: var(--dnd-ink-faint);
}

.tavern-skill-total[b-kyen3fkkma] {
    font-family: 'Cinzel', serif;
    font-size: 14px;
    color: var(--dnd-ink-dim);
}

.tavern-skill-total.proficient[b-kyen3fkkma] {
    color: var(--dnd-ink);
}
/* /Components/Characters/CharacterSpellSlotsPanel.razor.rz.scp.css */
.tavern-spell-slots-panel[b-uw52u3iale] {
    padding: 18px 22px;
}

.tavern-spell-slots-grid[b-uw52u3iale] {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 32px;
}

.tavern-spell-slots-group[b-uw52u3iale] {
    min-width: 92px;
}

.tavern-spell-slots-level[b-uw52u3iale] {
    font-family: 'EB Garamond', serif;
    font-size: 13px;
    color: var(--dnd-ink-dim);
    margin-bottom: 6px;
}

.tavern-spell-slots-dots[b-uw52u3iale] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tavern-spell-slot[b-uw52u3iale] {
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--dnd-border-strong);
    background: transparent;
    cursor: pointer;
}

.tavern-spell-slot.available[b-uw52u3iale] {
    border-color: var(--dnd-gold);
    background: radial-gradient(circle at 35% 30%, var(--dnd-gold-bright), var(--dnd-label-gold));
}

.tavern-spell-slot:disabled[b-uw52u3iale] {
    cursor: default;
    opacity: 0.6;
}

.tavern-spell-slot:hover:not(:disabled)[b-uw52u3iale] {
    border-color: var(--dnd-gold-bright);
}

.tavern-spell-slots-count[b-uw52u3iale] {
    margin-top: 6px;
    font-family: 'Cinzel', serif;
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--dnd-ink-faint);
}

.tavern-spell-slots-edit[b-uw52u3iale] {
    background: transparent;
    border: 1px solid var(--dnd-border);
    border-radius: 999px;
    padding: 3px 14px;
    font-family: 'Cinzel', serif;
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--dnd-ink-dim);
    cursor: pointer;
}

.tavern-spell-slots-edit:hover[b-uw52u3iale] {
    border-color: var(--dnd-gold);
    color: var(--dnd-gold-bright);
}

.tavern-spell-slots-editor[b-uw52u3iale] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px 18px;
}

.tavern-spell-slots-editor-row[b-uw52u3iale] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.tavern-spell-slots-editor-row .tavern-spell-slots-level[b-uw52u3iale] {
    margin-bottom: 0;
}

.tavern-spell-slots-editor-row input[b-uw52u3iale] {
    width: 68px;
}

/* Les pastilles cliquables n'ont pas de sens sur papier : la fiche imprimée garde le décompte. */
@media print {
    .tavern-spell-slot[b-uw52u3iale] {
        width: 14px;
        height: 14px;
    }
}
/* /Components/Characters/CharacterSpellsTab.razor.rz.scp.css */
.tavern-spell-save-dc[b-y0cp2lee6u] {
    padding: 10px 18px;
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.tavern-spell-save-dc .tavern-eyebrow[b-y0cp2lee6u] {
    margin-bottom: 0;
}

.tavern-spell-save-dc-value[b-y0cp2lee6u] {
    font-family: 'Cinzel', serif;
    font-size: 20px;
    color: var(--dnd-ink);
}

.tavern-spell-search-result[b-y0cp2lee6u] {
    display: block;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.tavern-spell-search-result:hover[b-y0cp2lee6u] {
    border-color: var(--dnd-gold);
}
/* /Components/Characters/CharacterStatusCard.razor.rz.scp.css */
.tavern-status-card[b-qxbp5zxxge] {
    padding: 18px 22px;
}

.tavern-inspiration-group[b-qxbp5zxxge] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* La pastille n'est plus cliquable depuis qu'elle affiche un compte : ce sont les deux boutons du
   pas-à-pas qui portent l'action, elle n'est plus qu'un afficheur. */
.tavern-inspiration-pill[b-qxbp5zxxge] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 1px solid var(--dnd-border);
    border-radius: 999px;
    padding: 7px 14px;
    color: var(--dnd-ink-dim);
    font-family: 'Cinzel', serif;
    font-size: 12px;
    letter-spacing: 0.05em;
}

.tavern-inspiration-count[b-qxbp5zxxge] {
    font-size: 14px;
    /* Assez large pour deux chiffres : sans ça, passer de 9 à 10 points élargit la pastille et
       décale toute la rangée d'état. */
    min-width: 1.6em;
    text-align: center;
}

.tavern-inspiration-pill.active .tavern-inspiration-count[b-qxbp5zxxge] {
    color: var(--dnd-gold-bright);
}

.tavern-inspiration-stepper[b-qxbp5zxxge] {
    display: flex;
    gap: 4px;
}

.tavern-inspiration-stepper button[b-qxbp5zxxge] {
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--dnd-border);
    background: transparent;
    color: var(--dnd-ink-dim);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.tavern-inspiration-stepper button:hover:not(:disabled)[b-qxbp5zxxge] {
    border-color: var(--dnd-gold);
    color: var(--dnd-gold-bright);
}

.tavern-inspiration-stepper button:disabled[b-qxbp5zxxge] {
    cursor: default;
    opacity: 0.45;
}

.tavern-inspiration-pill.active[b-qxbp5zxxge] {
    border-color: var(--dnd-gold);
    color: var(--dnd-gold-bright);
}

.tavern-inspiration-dot[b-qxbp5zxxge] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--dnd-ink-faint);
}

.tavern-inspiration-pill.active .tavern-inspiration-dot[b-qxbp5zxxge] {
    background: var(--dnd-gold-bright);
}

.tavern-status-highlight[b-qxbp5zxxge] {
    font-family: 'Cinzel', serif;
    font-size: 15px;
    color: var(--dnd-gold-bright);
}

.tavern-status-toggle[b-qxbp5zxxge] {
    font-family: 'Cinzel', serif;
    font-size: 12px;
    padding: 4px 14px;
    border-radius: 999px;
    border: 1px solid var(--dnd-border);
    background: transparent;
    color: var(--dnd-ink-dim);
    cursor: pointer;
}

.tavern-status-toggle.active[b-qxbp5zxxge] {
    border-color: var(--dnd-green);
    background: rgba(62, 107, 79, 0.15);
    color: var(--dnd-ink);
}

/* .tavern-condition-chip vit dans dnd-theme.css : la fiche de combat affiche les mêmes pastilles
   d'état, et un style scopé ici ne l'aurait pas suivie. */

.tavern-status-grid-2col[b-qxbp5zxxge] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    border-top: 1px dashed var(--dnd-border);
    padding-top: 14px;
}

.tavern-tag-remove[b-qxbp5zxxge] {
    background: transparent;
    border: none;
    color: inherit;
    padding: 0 0 0 4px;
    cursor: pointer;
}

.tavern-tag-input[b-qxbp5zxxge] {
    width: 120px;
    display: inline-block;
}
/* /Components/Characters/CreatorPickerCarousel.razor.rz.scp.css */
.tavern-picker-carousel[b-uke7pobfir] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    height: 220px;
    margin-bottom: 24px;
}

.tavern-picker-arrow[b-uke7pobfir] {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--dnd-border);
    background: transparent;
    color: var(--dnd-gold);
    cursor: pointer;
}

.tavern-picker-arrow:hover[b-uke7pobfir] {
    border-color: var(--dnd-gold);
}

.tavern-picker-card[b-uke7pobfir] {
    width: 180px;
    height: 196px;
    flex-shrink: 0;
    border-radius: 8px 8px 50px 50px;
    border: 2px solid var(--dnd-gold);
    background: linear-gradient(180deg, var(--dnd-panel-1) 0%, #14110F 100%);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.tavern-picker-card-glyph[b-uke7pobfir] {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 1px solid var(--dnd-gold-bright);
    background: radial-gradient(circle, rgba(201, 162, 39, 0.12) 0%, transparent 70%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.tavern-picker-card-glyph img[b-uke7pobfir] {
    width: 78%;
    height: 78%;
    object-fit: contain;
}

.tavern-picker-card-name[b-uke7pobfir] {
    font-family: 'Cinzel', serif;
    font-size: 14px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dnd-ink);
    text-align: center;
    padding: 0 8px;
}

.tavern-picker-dots[b-uke7pobfir] {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
}

.tavern-picker-dot[b-uke7pobfir] {
    width: 6px;
    height: 6px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--dnd-ink-faint);
    background: transparent;
    cursor: pointer;
}

.tavern-picker-dot.active[b-uke7pobfir] {
    width: 9px;
    height: 9px;
    border-color: var(--dnd-gold-bright);
    background: var(--dnd-red, #7A2E2E);
}

.tavern-picker-detail[b-uke7pobfir] {
    max-width: 560px;
    margin: 0 auto;
    padding: 20px 26px;
}

.tavern-picker-detail-name[b-uke7pobfir] {
    font-family: 'Cinzel', serif;
    font-size: 18px;
    color: var(--dnd-gold-bright);
    margin-bottom: 6px;
}

.tavern-picker-detail-description[b-uke7pobfir] {
    font-size: 15px;
    line-height: 1.6;
    color: var(--dnd-ink-dim);
}
/* /Components/Characters/SkillRow.razor.rz.scp.css */
/* Un avantage ou une résistance se lit sur la ligne de la compétence, pas dans une liste à
   part : c'est là qu'on regarde au moment de lancer le dé. */
.tavern-skill-trait[b-lt2feuppsw] {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    background: rgba(62, 107, 79, 0.18);
    border: 1px solid var(--dnd-green);
    border-radius: 2px;
    font-size: 11px;
    color: var(--dnd-green-text);
    cursor: help;
}
/* /Components/Combat/CombatOrderBanner.razor.rz.scp.css */
/* Bandeau d'ordre de tour, rangé contre l'un des quatre bords de la carte pendant un combat.

   z-index 900 : au-dessus des calques et des contrôles Leaflet (400 à 800) et du canvas de
   brouillard (620), mais en dessous des panneaux latéraux de la carte (1000) — sous 768px ceux-ci
   deviennent une feuille par le bas, qui doit recouvrir le bandeau plutôt que d'être tronquée par
   lui — et des barres d'outils du plein écran (1200). */
.combat-order-banner[b-6pb3jekndp] {
    /* Taille des médaillons, d'où découle toute l'épaisseur du bandeau. 64px sur grand écran, soit
       plus du double de la fiche de combat (40px) : celle-ci se lit à 50 cm, celui-ci depuis
       l'autre bout de la table, sur un écran projeté. La progression s'arrête bien avant sur les
       petits écrans, où le bandeau prend sa place sur la carte et non à côté. */
    --token-size: 64px;
    --card-name-size: 1.05rem;
    --card-line-size: 0.9rem;

    position: absolute;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(28, 24, 17, 0.92);
    border: 0 solid rgba(198, 163, 90, 0.45);
}

/* Un bord par variante : position, trait de séparation, ombre portée vers l'intérieur de la carte,
   coins arrondis épousant ceux de .map-explorer-canvas (MapExplorer les remet à zéro en plein
   écran) et débord des écrans à encoche du côté concerné. */
.combat-order-banner.is-bottom[b-6pb3jekndp],
.combat-order-banner.is-top[b-6pb3jekndp] {
    left: 0;
    right: 0;
    padding: 0.5rem 0.75rem;
}

.combat-order-banner.is-bottom[b-6pb3jekndp] {
    bottom: 0;
    border-top-width: 1px;
    box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.55);
    border-radius: 0 0 6px 6px;
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
}

.combat-order-banner.is-top[b-6pb3jekndp] {
    top: 0;
    border-bottom-width: 1px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55);
    border-radius: 6px 6px 0 0;
    padding-top: calc(0.5rem + env(safe-area-inset-top, 0px));
}

.combat-order-banner.is-left[b-6pb3jekndp],
.combat-order-banner.is-right[b-6pb3jekndp] {
    top: 0;
    bottom: 0;
    flex-direction: column;
    padding: 0.75rem 0.5rem;
}

.combat-order-banner.is-left[b-6pb3jekndp] {
    left: 0;
    border-right-width: 1px;
    box-shadow: 4px 0 14px rgba(0, 0, 0, 0.55);
    border-radius: 6px 0 0 6px;
    padding-left: calc(0.5rem + env(safe-area-inset-left, 0px));
}

.combat-order-banner.is-right[b-6pb3jekndp] {
    right: 0;
    border-left-width: 1px;
    box-shadow: -4px 0 14px rgba(0, 0, 0, 0.55);
    border-radius: 0 6px 6px 0;
    padding-right: calc(0.5rem + env(safe-area-inset-right, 0px));
}

.combat-order-round[b-6pb3jekndp] {
    flex-shrink: 0;
    font-family: 'Cinzel', serif;
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dnd-label-gold);
    white-space: nowrap;
}

/* Contre un bord vertical, la mention passe sur deux lignes courtes : gardée d'un seul tenant,
   c'est elle qui fixerait la largeur de la colonne, à plus du double des médaillons. */
.is-left .combat-order-round[b-6pb3jekndp],
.is-right .combat-order-round[b-6pb3jekndp] {
    white-space: normal;
    text-align: center;
    line-height: 1.15;
    max-width: var(--token-size);
}

/* Une seule rangée (ou colonne), jamais un pavé qui grandit : avec beaucoup de participants,
   `flex-wrap: wrap` empilait des rangées jusqu'à déborder de l'écran ou recouvrir la carte
   (BUG-MAP-001). L'épaisseur du bandeau reste donc fixe — un seul token de haut contre un bord
   horizontal, un seul de large contre un bord vertical — et c'est la liste qui défile le long de
   son unique axe quand elle ne tient plus dans la largeur (ou la hauteur) disponible. `safe center`
   évite qu'un centrage naïf ne rende le début de la liste inatteignable au défilement une fois
   qu'elle déborde ; le second `justify-content` ne s'applique que si le navigateur le comprend. */
.combat-order-list[b-6pb3jekndp] {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    justify-content: safe center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    scrollbar-width: thin;
    scrollbar-color: rgba(198, 163, 90, 0.55) transparent;
}

.is-bottom .combat-order-list[b-6pb3jekndp],
.is-top .combat-order-list[b-6pb3jekndp] {
    overflow-x: auto;
    overflow-y: hidden;
}

.is-left .combat-order-list[b-6pb3jekndp],
.is-right .combat-order-list[b-6pb3jekndp] {
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
}

.combat-order-item[b-6pb3jekndp] {
    position: static;
    line-height: 0;
}

.combat-order-token[b-6pb3jekndp] {
    position: relative;
    padding: 0;
    background: none;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: block;
    transition: transform 120ms ease-out;
}

/* Enveloppe du médaillon. Le bouton porte l'agrandissement (survol, tour en cours) et cette
   enveloppe la chute : deux `transform` sur un même élément ne se composent pas, la mort d'un
   combattant survolé annulerait son agrandissement — ou l'inverse, selon l'ordre des règles. */
.combat-order-token-body[b-6pb3jekndp] {
    display: block;
    line-height: 0;
}

.combat-order-token:hover[b-6pb3jekndp] {
    transform: scale(1.1);
}

.combat-order-token[b-6pb3jekndp]  .tavern-combat-avatar {
    width: var(--token-size);
    height: var(--token-size);
    /* Le trait d'un pixel de la fiche de combat disparaît à cette taille, et avec lui la couleur
       qui distingue un monstre d'un personnage. */
    border-width: 2px;
}

.combat-order-token[b-6pb3jekndp]  .tavern-combat-avatar span {
    font-size: calc(var(--token-size) * 0.36);
}

/* Bouton de déplacement. Sa flèche montre où le bandeau va, pas où il est : le tour des quatre
   bords se fait sans rien avoir à expliquer, et sans poser de sélecteur sur une carte projetée.
   Cible tactile de 44px (WCAG 2.5.5), la carte s'utilisant beaucoup au doigt. */
.combat-order-move[b-6pb3jekndp] {
    flex-shrink: 0;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 1.2rem;
    line-height: 1;
    color: var(--dnd-label-gold);
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(198, 163, 90, 0.45);
    border-radius: 6px;
    cursor: pointer;
    transition: color 120ms ease-out, border-color 120ms ease-out;
}

.combat-order-move:hover[b-6pb3jekndp],
.combat-order-move:focus-visible[b-6pb3jekndp] {
    color: var(--dnd-gold-bright);
    border-color: var(--dnd-gold-bright);
}

/* Combattant dont c'est le tour : anneau doré et pulsation lente. C'est la seule information que
   le bandeau donne sans survol, elle doit se voir depuis l'autre bout de la table. */
.combat-order-item.is-active .combat-order-token[b-6pb3jekndp] {
    transform: scale(1.15);
}

.combat-order-item.is-active .combat-order-token[b-6pb3jekndp]  .tavern-combat-avatar {
    border-color: var(--dnd-gold-bright);
    box-shadow: 0 0 0 2px rgba(232, 196, 104, 0.35), 0 0 12px rgba(232, 196, 104, 0.55);
    animation: combat-order-pulse-b-6pb3jekndp 1.8s ease-in-out infinite;
}

@keyframes combat-order-pulse-b-6pb3jekndp {
    50% {
        box-shadow: 0 0 0 3px rgba(232, 196, 104, 0.2), 0 0 18px rgba(232, 196, 104, 0.75);
    }
}

/* À terre. S'applique aussi aux monstres, dont les PV restent pourtant cachés : la table voit la
   créature tomber de toute façon. */
.combat-order-item.is-down .combat-order-token[b-6pb3jekndp]  .tavern-combat-avatar {
    filter: grayscale(1);
    opacity: 0.45;
}

/* Mort. Les trois règles qui suivent viennent après celles de `is-active` et de `is-down`, à
   spécificité égale : c'est leur position qui leur donne la main le temps de la chute, sur la
   pulsation du combattant actif comme sur le gris définitif des morts — sans quoi la créature
   serait déjà éteinte avant d'avoir commencé à tomber. */
.combat-order-item.is-falling .combat-order-token-body[b-6pb3jekndp] {
    animation: combat-order-fall-b-6pb3jekndp 1400ms cubic-bezier(0.3, 0.7, 0.4, 1) forwards;
}

.combat-order-item.is-falling .combat-order-token[b-6pb3jekndp]  .tavern-combat-avatar {
    animation: combat-order-strike-b-6pb3jekndp 1400ms ease-out forwards;
}

/* Le coup encaissé : un anneau rouge qui s'élargit et s'efface. Posé sur le bouton, resté immobile,
   et non sur l'enveloppe qui bascule — il partirait sinon de travers avec elle. */
.combat-order-strike[b-6pb3jekndp] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--dnd-red-text);
    pointer-events: none;
    animation: combat-order-strike-ring-b-6pb3jekndp 700ms ease-out forwards;
}

/* Sursaut, puis bascule. La secousse tient dans les 300 premières millisecondes — le temps de
   lecture d'un coup encaissé — et la chute occupe tout le reste, assez lente pour qu'on la suive
   du regard depuis le fond de la pièce. */
@keyframes combat-order-fall-b-6pb3jekndp {
    0% { transform: none; }
    6% { transform: translate(-4px, -3px) rotate(4deg); }
    13% { transform: translate(4px, -1px) rotate(-4deg); }
    20% { transform: translate(-2px, 0) rotate(2deg); }
    26% { transform: none; }
    100% { transform: translateY(18%) rotate(-78deg); }
}

@keyframes combat-order-strike-b-6pb3jekndp {
    0% { filter: none; opacity: 1; }
    8% { filter: brightness(2.4) saturate(1.8) hue-rotate(-12deg); opacity: 1; }
    26% { filter: none; opacity: 1; }
    100% { filter: grayscale(1); opacity: 0.45; }
}

@keyframes combat-order-strike-ring-b-6pb3jekndp {
    0% { transform: scale(0.75); opacity: 0; }
    18% { transform: scale(1); opacity: 0.95; }
    100% { transform: scale(2.1); opacity: 0; }
}

/* Vignette de détail. Centrée le long du bandeau entier, et non sur l'avatar survolé : ancrée à
   l'avatar, elle déborderait de l'écran dès que celui-ci est en bout de rangée, ce qu'aucun
   repositionnement purement CSS ne sait rattraper. L'avatar survolé grossit, c'est lui qui porte
   le lien visuel. */
.combat-order-card[b-6pb3jekndp] {
    position: absolute;
    width: max-content;
    padding: 0.6rem 0.85rem;
    background: #211c14;
    border: 1px solid rgba(198, 163, 90, 0.5);
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
    line-height: 1.35;
    text-align: left;
    /* Purement informative : la laisser transparente aux clics évite qu'elle n'intercepte un
       geste destiné à la carte au moment où elle apparaît sous le curseur. */
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 120ms ease-out;
}

/* Toujours du côté de la carte, jamais du côté du vide. */
.is-bottom .combat-order-card[b-6pb3jekndp],
.is-top .combat-order-card[b-6pb3jekndp] {
    left: 50%;
    transform: translateX(-50%);
    max-width: min(380px, calc(100vw - 1.5rem));
}

.is-bottom .combat-order-card[b-6pb3jekndp] {
    bottom: calc(100% + 0.5rem);
}

.is-top .combat-order-card[b-6pb3jekndp] {
    top: calc(100% + 0.5rem);
}

.is-left .combat-order-card[b-6pb3jekndp],
.is-right .combat-order-card[b-6pb3jekndp] {
    top: 50%;
    transform: translateY(-50%);
    /* La colonne occupe déjà sa part de largeur : la vignette prend ce qui reste, sans jamais
       repousser le bord opposé de l'écran. */
    max-width: min(380px, calc(100vw - var(--token-size) - 4rem));
}

.is-left .combat-order-card[b-6pb3jekndp] {
    left: calc(100% + 0.5rem);
}

.is-right .combat-order-card[b-6pb3jekndp] {
    right: calc(100% + 0.5rem);
}

.combat-order-item:hover .combat-order-card[b-6pb3jekndp],
.combat-order-item:focus-within .combat-order-card[b-6pb3jekndp],
.combat-order-item.is-open .combat-order-card[b-6pb3jekndp] {
    opacity: 1;
    visibility: visible;
}

/* Une vignette épinglée au doigt et une autre ouverte au survol se superposeraient sur un appareil
   qui a les deux. Le survol est le geste en cours : c'est lui qui gagne. */
.combat-order-list:has(.combat-order-item:hover) .combat-order-item.is-open:not(:hover) .combat-order-card[b-6pb3jekndp] {
    opacity: 0;
    visibility: hidden;
}

/* La vignette suit les médaillons : c'est elle que le MJ ouvre pour montrer un état à la table,
   à la même distance de lecture. */
.combat-order-card-name[b-6pb3jekndp] {
    font-family: 'Cinzel', serif;
    font-size: var(--card-name-size);
    color: var(--dnd-gold-bright);
}

.combat-order-card-line[b-6pb3jekndp] {
    font-size: var(--card-line-size);
    color: var(--dnd-ink-dim);
}

.combat-order-card-hp[b-6pb3jekndp] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.25rem;
    color: var(--dnd-ink);
}

.combat-order-card-bar[b-6pb3jekndp] {
    height: 8px;
    margin-top: 3px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.45);
    overflow: hidden;
}

.combat-order-card-bar-fill[b-6pb3jekndp] {
    height: 100%;
    border-radius: 4px;
}

.combat-order-card-conditions[b-6pb3jekndp] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 0.4rem;
}

/* Tablette : le bandeau reste lisible à bout de bras, mais la carte n'a plus de quoi lui céder
   80px d'épaisseur. */
@media (max-width: 991.98px) {
    .combat-order-banner[b-6pb3jekndp] {
        --token-size: 46px;
        --card-name-size: 0.95rem;
        --card-line-size: 0.82rem;
    }

    .combat-order-round[b-6pb3jekndp] {
        font-size: 0.8rem;
    }
}

/* Le bandeau vole de la carte : sur un écran étroit, les avatars rétrécissent plutôt que d'occuper
   une rangée de plus. Aucun téléphone ne sert d'écran de table, la lisibilité à distance ne se
   paie pas ici. */
@media (max-width: 575.98px) {
    .combat-order-banner[b-6pb3jekndp] {
        --token-size: 34px;
        --card-name-size: 0.9rem;
        --card-line-size: 0.78rem;

        gap: 0.4rem;
    }

    .combat-order-banner.is-bottom[b-6pb3jekndp],
    .combat-order-banner.is-top[b-6pb3jekndp] {
        padding-inline: 0.4rem;
    }

    .combat-order-banner.is-left[b-6pb3jekndp],
    .combat-order-banner.is-right[b-6pb3jekndp] {
        padding-block: 0.4rem;
    }

    .combat-order-round[b-6pb3jekndp] {
        font-size: 0.62rem;
        /* La mention tient sur deux lignes courtes plutôt que d'imposer sa largeur à la rangée. */
        max-width: 3.2rem;
        white-space: normal;
    }
}

@media (prefers-reduced-motion: reduce) {
    .combat-order-token[b-6pb3jekndp],
    .combat-order-card[b-6pb3jekndp],
    .combat-order-move[b-6pb3jekndp] {
        transition: none;
    }

    .combat-order-item.is-active .combat-order-token[b-6pb3jekndp]  .tavern-combat-avatar {
        animation: none;
    }

    /* La chute est supprimée, pas son résultat : le mort doit rester reconnaissable comme tel.
       C'est `is-down`, toujours posée, qui l'éteint une fois la classe de chute retirée — et le
       raccourci de l'animation à un pas fait tenir l'intervalle sans à-coup. */
    .combat-order-item.is-falling .combat-order-token-body[b-6pb3jekndp] {
        animation: none;
    }

    /* Privé de son animation, l'anneau resterait planté autour du médaillon jusqu'à la fin de la
       chute — un cercle rouge immobile, qu'on lirait comme un état et non comme un coup. */
    .combat-order-strike[b-6pb3jekndp] {
        display: none;
    }

    .combat-order-item.is-falling .combat-order-token[b-6pb3jekndp]  .tavern-combat-avatar {
        animation: combat-order-strike-b-6pb3jekndp 1ms linear forwards;
    }
}
/* /Components/Combat/CombatStartFlourish.razor.rz.scp.css */
/* Durées et décalages de la séquence, regroupés pour que le montage reste lisible d'un coup d'œil.
   Total = 1960 ms, valeur reprise par CombatTracker pour démonter le composant (constante
   StartFlourishDuration) : toute retouche ici doit y être reportée. */
.flourish[b-qqhdq0j40h] {
    --duration-scrim: 150ms;
    --duration-travel: 560ms;
    --duration-impact: 320ms;
    --duration-spark: 560ms;
    --duration-title: 440ms;
    --duration-subtitle: 380ms;
    --duration-out: 400ms;
    --delay-travel: 60ms;
    --delay-impact: 560ms;
    --delay-title: 660ms;
    --delay-subtitle: 860ms;
    --delay-out: 1560ms;

    /* Hauteur du point de croisement, et échelle de l'ensemble du duel. */
    --duel-top: 40%;
    --duel-scale: 1;
    --text-offset: 176px;

    --steel-edge: #6E7683;
    --steel: #C9D0DA;
    --steel-shine: #EEF2F7;

    position: fixed;
    inset: 0;
    /* Purement décoratif : ne doit jamais intercepter un clic du MJ. */
    pointer-events: none;
    /* Au-dessus des barres collantes de la page, sous les dialogues modaux éventuels. */
    z-index: 1080;
    /* Sortie appliquée au calque entier : le composant est démonté juste après, ce fondu évite la
       disparition sèche entre la fin de la séquence et le rendu suivant. */
    animation: flourish-out-b-qqhdq0j40h var(--duration-out) ease-in var(--delay-out) forwards;
}

.flourish-scrim[b-qqhdq0j40h] {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 36%, rgba(201, 162, 39, 0.17) 0%, transparent 48%),
        rgba(8, 6, 5, 0.85);
    animation: flourish-scrim-in-b-qqhdq0j40h var(--duration-scrim) ease-out forwards;
}

.flourish-duel[b-qqhdq0j40h] {
    position: absolute;
    left: 50%;
    top: var(--duel-top);
    width: 0;
    height: 0;
    transform: scale(var(--duel-scale));
    transform-origin: 0 0;
}

/* Épée dessinée horizontalement, pointe à droite, puis amenée en place par translation et
   rotation : le point situé a 200px de l'origine de rotation tombe sur le croisement, ce qui place
   les lames aux deux tiers l'une de l'autre plutôt que bout à bout. */
.flourish-sword[b-qqhdq0j40h] {
    position: absolute;
    left: 0;
    top: 0;
    width: 290px;
    height: 22px;
    transform-origin: 12% 50%;
    filter: drop-shadow(0 3px 7px rgba(0, 0, 0, 0.8));
    opacity: 0;
}

.flourish-sword-left[b-qqhdq0j40h] {
    transform: translate(-188px, 118px) rotate(-40deg);
    animation: flourish-strike-left-b-qqhdq0j40h var(--duration-travel) cubic-bezier(0.14, 0.85, 0.28, 1) var(--delay-travel) forwards;
}

.flourish-sword-right[b-qqhdq0j40h] {
    transform: translate(118px, 118px) rotate(-140deg);
    animation: flourish-strike-right-b-qqhdq0j40h var(--duration-travel) cubic-bezier(0.14, 0.85, 0.28, 1) var(--delay-travel) forwards;
}

.flourish-blade[b-qqhdq0j40h] {
    position: absolute;
    left: 62px;
    top: 4px;
    width: 228px;
    height: 14px;
    clip-path: polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%);
    background: linear-gradient(180deg, var(--steel-edge) 0%, var(--steel) 26%, var(--steel-shine) 48%, var(--steel) 62%, #4E555F 100%);
}

.flourish-fuller[b-qqhdq0j40h] {
    position: absolute;
    left: 68px;
    top: 10px;
    width: 202px;
    height: 2px;
    background: rgba(28, 32, 38, 0.5);
}

.flourish-guard[b-qqhdq0j40h] {
    position: absolute;
    left: 52px;
    top: -12px;
    width: 12px;
    height: 46px;
    border-radius: 3px;
    background: linear-gradient(90deg, #8A6D22, var(--dnd-gold) 45%, var(--dnd-gold-bright) 62%, #7A5F1C);
}

.flourish-grip[b-qqhdq0j40h] {
    position: absolute;
    left: 14px;
    top: 5px;
    width: 40px;
    height: 12px;
    border-radius: 2px;
    background: repeating-linear-gradient(115deg, #46311F 0 4px, #2E2013 4px 8px);
}

.flourish-pommel[b-qqhdq0j40h] {
    position: absolute;
    left: -2px;
    top: 1px;
    width: 18px;
    height: 20px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, var(--dnd-gold-bright), #7A5F1C 72%);
}

.flourish-flash[b-qqhdq0j40h] {
    position: absolute;
    left: -11px;
    top: -11px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: radial-gradient(circle, #FFF8E2 0%, var(--dnd-gold-bright) 34%, rgba(201, 162, 39, 0) 72%);
    opacity: 0;
    animation: flourish-flash-b-qqhdq0j40h var(--duration-impact) ease-out var(--delay-impact) forwards;
}

.flourish-spark[b-qqhdq0j40h] {
    position: absolute;
    left: -2px;
    top: -2px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--dnd-gold-bright);
    opacity: 0;
    animation: flourish-spark-b-qqhdq0j40h var(--duration-spark) cubic-bezier(0.2, 0.7, 0.4, 1) var(--delay-impact) forwards;
}

.flourish-text[b-qqhdq0j40h] {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--duel-top) + var(--text-offset));
    text-align: center;
}

.flourish-title[b-qqhdq0j40h] {
    font-family: 'Cinzel', serif;
    font-size: clamp(1.9rem, 5.5vw, 2.9rem);
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--dnd-gold-bright);
    text-shadow: 0 0 28px rgba(201, 162, 39, 0.38);
    /* Compense l'interlettrage de la dernière capitale, qui décentrerait le mot. */
    margin: 0 0 0 0.3em;
    opacity: 0;
    animation: flourish-title-in-b-qqhdq0j40h var(--duration-title) cubic-bezier(0.2, 0.8, 0.3, 1) var(--delay-title) forwards;
}

.flourish-subtitle[b-qqhdq0j40h] {
    font-size: 0.78rem;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    color: var(--dnd-ink-dim);
    margin: 0.55rem auto 0;
    max-width: min(34rem, 88%);
    text-wrap: balance;
    opacity: 0;
    animation: flourish-subtitle-in-b-qqhdq0j40h var(--duration-subtitle) ease-out var(--delay-subtitle) forwards;
}

@keyframes flourish-scrim-in-b-qqhdq0j40h {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes flourish-strike-left-b-qqhdq0j40h {
    0% { transform: translate(-1020px, 470px) rotate(-40deg); opacity: 1; }
    80% { transform: translate(-176px, 108px) rotate(-42deg); opacity: 1; }
    100% { transform: translate(-188px, 118px) rotate(-40deg); opacity: 1; }
}

@keyframes flourish-strike-right-b-qqhdq0j40h {
    0% { transform: translate(950px, 470px) rotate(-140deg); opacity: 1; }
    80% { transform: translate(106px, 108px) rotate(-138deg); opacity: 1; }
    100% { transform: translate(118px, 118px) rotate(-140deg); opacity: 1; }
}

@keyframes flourish-flash-b-qqhdq0j40h {
    0% { opacity: 0; transform: scale(0.4); }
    16% { opacity: 1; transform: scale(5); }
    100% { opacity: 0; transform: scale(11); }
}

@keyframes flourish-spark-b-qqhdq0j40h {
    0% { opacity: 1; transform: rotate(var(--spark-angle)) translateX(8px) scale(1); }
    100% { opacity: 0; transform: rotate(var(--spark-angle)) translateX(var(--spark-distance)) scale(0.25); }
}

@keyframes flourish-title-in-b-qqhdq0j40h {
    0% { opacity: 0; letter-spacing: 0.66em; transform: scale(1.05); }
    100% { opacity: 1; letter-spacing: 0.3em; transform: scale(1); }
}

@keyframes flourish-subtitle-in-b-qqhdq0j40h {
    0% { opacity: 0; transform: translateY(6px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes flourish-out-b-qqhdq0j40h {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* Les lames occupent 346px de large : sous 480px elles toucheraient les deux bords. */
@media (max-width: 480px) {
    .flourish[b-qqhdq0j40h] {
        --duel-scale: 0.68;
        --text-offset: 128px;
    }
}

/* Écran bas (portable en paysage) : le titre passerait sous la ligne de flottaison. */
@media (max-height: 560px) {
    .flourish[b-qqhdq0j40h] {
        --duel-top: 34%;
        --duel-scale: 0.72;
        --text-offset: 132px;
    }
}

/* Mouvement réduit : ni lames lancées, ni étincelles, ni secousse — l'annonce reste, en fondu.
   La règle transition: none de dnd-theme.css ne couvre pas les animations, d'où ce bloc. */
@media (prefers-reduced-motion: reduce) {
    .flourish-duel[b-qqhdq0j40h] {
        display: none;
    }

    .flourish-title[b-qqhdq0j40h],
    .flourish-subtitle[b-qqhdq0j40h] {
        animation-name: flourish-scrim-in-b-qqhdq0j40h;
        animation-duration: 320ms;
        transform: none;
    }

    .flourish-title[b-qqhdq0j40h] {
        letter-spacing: 0.3em;
        animation-delay: 0ms;
    }

    .flourish-subtitle[b-qqhdq0j40h] {
        animation-delay: 120ms;
    }

    .flourish[b-qqhdq0j40h] {
        --delay-out: 1100ms;
    }
}
/* /Components/Combat/CombatTurnFlourish.razor.rz.scp.css */
/* Total = 1240 ms, valeur reprise par CombatTracker pour démonter le composant (constante
   TurnFlourishDuration) : toute retouche ici doit y être reportée.

   Les lames sont celles de CombatStartFlourish à échelle réduite, mais leur géométrie est
   réécrite ici plutôt que partagée : elles ne convergent pas vers le centre de l'écran mais vers
   le portrait, sur une course deux fois plus courte. */
.turn[b-7mzt3cn3mp] {
    --duration-scrim: 120ms;
    --duration-travel: 340ms;
    --duration-portrait: 260ms;
    --duration-text: 300ms;
    --duration-out: 280ms;
    --delay-travel: 40ms;
    --delay-portrait: 320ms;
    --delay-text: 420ms;
    --delay-out: 960ms;

    --emblem-top: 140px;
    --portrait-size: 76px;
    /* Sous 0,8 les lames sont trop courtes face au médaillon de 76px : elles se lisent comme deux
       épingles plantées derrière une pièce, plus comme des épées croisées. */
    --duel-scale: 0.9;
    --text-offset: 100px;

    --steel-edge: #6E7683;
    --steel: #C9D0DA;
    --steel-shine: #EEF2F7;

    position: fixed;
    inset: 0 0 auto 0;
    /* Assez haut pour que la partie opaque du dégradé couvre tout le bloc de texte (qui finit vers
       317px) et que le fondu se fasse dans les 100px suivants : sur un bandeau plus court, le nom
       se retrouvait sur la zone déjà transparente et se mélangeait au contenu de la page. */
    height: 420px;
    pointer-events: none;
    z-index: 1080;
    animation: turn-out-b-7mzt3cn3mp var(--duration-out) ease-in var(--delay-out) forwards;
}

/* Bandeau dégradé plutôt qu'un voile plein : le MJ garde l'ordre de tour et les PV sous les yeux
   pendant l'annonce, ce qui est tout l'intérêt d'un bandeau haut à cet endroit. */
.turn-scrim[b-7mzt3cn3mp] {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(8, 6, 5, 0.98) 0%,
        rgba(8, 6, 5, 0.97) 62%,
        rgba(8, 6, 5, 0.95) 78%,
        rgba(8, 6, 5, 0) 100%);
    animation: turn-fade-in-b-7mzt3cn3mp var(--duration-scrim) ease-out forwards;
}

.turn-emblem[b-7mzt3cn3mp] {
    position: absolute;
    left: 50%;
    top: var(--emblem-top);
    width: 0;
    height: 0;
}

.turn-duel[b-7mzt3cn3mp] {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    transform: scale(var(--duel-scale));
    transform-origin: 0 0;
}

.turn-sword[b-7mzt3cn3mp] {
    position: absolute;
    left: 0;
    top: 0;
    width: 250px;
    height: 18px;
    transform-origin: 14% 50%;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.8));
    opacity: 0;
}

/* Croisement placé assez bas sur la lame pour que les pointes dépassent du médaillon : centré sur
   le portrait, un croisement aux deux tiers ne laissait rien voir au-dessus. */
.turn-sword-left[b-7mzt3cn3mp] {
    transform: translate(-127px, 68px) rotate(-40deg);
    animation: turn-strike-left-b-7mzt3cn3mp var(--duration-travel) cubic-bezier(0.16, 0.86, 0.3, 1) var(--delay-travel) forwards;
}

.turn-sword-right[b-7mzt3cn3mp] {
    transform: translate(57px, 68px) rotate(-140deg);
    animation: turn-strike-right-b-7mzt3cn3mp var(--duration-travel) cubic-bezier(0.16, 0.86, 0.3, 1) var(--delay-travel) forwards;
}

.turn-blade[b-7mzt3cn3mp] {
    position: absolute;
    left: 56px;
    top: 3px;
    width: 194px;
    height: 12px;
    clip-path: polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%);
    background: linear-gradient(180deg, var(--steel-edge) 0%, var(--steel) 26%, var(--steel-shine) 48%, var(--steel) 62%, #4E555F 100%);
}

.turn-guard[b-7mzt3cn3mp] {
    position: absolute;
    left: 47px;
    top: -10px;
    width: 10px;
    height: 38px;
    border-radius: 3px;
    background: linear-gradient(90deg, #8A6D22, var(--dnd-gold) 45%, var(--dnd-gold-bright) 62%, #7A5F1C);
}

.turn-grip[b-7mzt3cn3mp] {
    position: absolute;
    left: 13px;
    top: 4px;
    width: 34px;
    height: 10px;
    border-radius: 2px;
    background: repeating-linear-gradient(115deg, #46311F 0 4px, #2E2013 4px 8px);
}

.turn-pommel[b-7mzt3cn3mp] {
    position: absolute;
    left: -2px;
    top: 1px;
    width: 15px;
    height: 16px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, var(--dnd-gold-bright), #7A5F1C 72%);
}

.turn-portrait[b-7mzt3cn3mp] {
    position: absolute;
    left: calc(var(--portrait-size) / -2);
    top: calc(var(--portrait-size) / -2);
    width: var(--portrait-size);
    height: var(--portrait-size);
    border-radius: 50%;
    background: var(--dnd-bg-3);
    box-shadow: 0 0 0 3px var(--dnd-bg-3), 0 0 22px rgba(201, 162, 39, 0.35);
    opacity: 0;
    animation: turn-portrait-in-b-7mzt3cn3mp var(--duration-portrait) cubic-bezier(0.2, 0.9, 0.3, 1.2) var(--delay-portrait) forwards;
}

/* L'avatar de combat est figé à 40px pour l'ordre de tour : ici il est le sujet de l'annonce. */
.turn-portrait[b-7mzt3cn3mp]  .tavern-combat-avatar {
    width: 100%;
    height: 100%;
    border-width: 2px;
}

.turn-portrait[b-7mzt3cn3mp]  .tavern-combat-avatar span {
    font-size: 30px;
}

.turn-text[b-7mzt3cn3mp] {
    position: absolute;
    left: 0;
    right: 0;
    /* Sous les pommeaux, qui descendent plus bas que le médaillon lui-même. */
    top: calc(var(--emblem-top) + var(--text-offset));
    text-align: center;
}

.turn-label[b-7mzt3cn3mp],
.turn-round[b-7mzt3cn3mp] {
    font-size: 0.68rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--dnd-label-gold);
    text-shadow: 0 1px 10px rgba(8, 6, 5, 0.95);
    margin: 0;
    opacity: 0;
    animation: turn-rise-b-7mzt3cn3mp var(--duration-text) ease-out var(--delay-text) forwards;
}

.turn-name[b-7mzt3cn3mp] {
    font-family: 'Cinzel', serif;
    font-size: clamp(1.35rem, 4vw, 1.9rem);
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--dnd-ink);
    /* Halo doré pour l'ambiance, ombre sombre pour la lisibilité : le nom se superpose au contenu
       de la page, dont on ne connaît ni la densité ni la couleur. */
    text-shadow: 0 0 22px rgba(201, 162, 39, 0.3), 0 2px 14px rgba(8, 6, 5, 0.95);
    margin: 0.2rem 0 0.1rem;
    opacity: 0;
    animation: turn-rise-b-7mzt3cn3mp var(--duration-text) ease-out calc(var(--delay-text) + 60ms) forwards;
}

.turn-round[b-7mzt3cn3mp] {
    color: var(--dnd-ink-faint);
    animation-delay: calc(var(--delay-text) + 120ms);
}

@keyframes turn-fade-in-b-7mzt3cn3mp {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes turn-strike-left-b-7mzt3cn3mp {
    0% { transform: translate(-1100px, 300px) rotate(-40deg); opacity: 1; }
    100% { transform: translate(-127px, 68px) rotate(-40deg); opacity: 1; }
}

@keyframes turn-strike-right-b-7mzt3cn3mp {
    0% { transform: translate(1030px, 300px) rotate(-140deg); opacity: 1; }
    100% { transform: translate(57px, 68px) rotate(-140deg); opacity: 1; }
}

@keyframes turn-portrait-in-b-7mzt3cn3mp {
    0% { opacity: 0; transform: scale(0.55); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes turn-rise-b-7mzt3cn3mp {
    0% { opacity: 0; transform: translateY(5px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes turn-out-b-7mzt3cn3mp {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

@media (max-width: 480px) {
    .turn[b-7mzt3cn3mp] {
        --emblem-top: 116px;
        --portrait-size: 62px;
        --duel-scale: 0.62;
        --text-offset: 76px;
        height: 360px;
    }
}

/* Mouvement réduit : le bandeau, le portrait et le nom apparaissent en fondu sur place. Les lames
   ne sont pas retirées comme à l'ouverture — immobiles, elles font partie du médaillon. */
@media (prefers-reduced-motion: reduce) {
    .turn-sword-left[b-7mzt3cn3mp],
    .turn-sword-right[b-7mzt3cn3mp],
    .turn-portrait[b-7mzt3cn3mp],
    .turn-label[b-7mzt3cn3mp],
    .turn-name[b-7mzt3cn3mp],
    .turn-round[b-7mzt3cn3mp] {
        animation-name: turn-fade-in-b-7mzt3cn3mp;
        animation-duration: 240ms;
        animation-delay: 0ms;
    }

    .turn-sword-left[b-7mzt3cn3mp] {
        transform: translate(-127px, 68px) rotate(-40deg);
    }

    .turn-sword-right[b-7mzt3cn3mp] {
        transform: translate(57px, 68px) rotate(-140deg);
    }

    .turn-portrait[b-7mzt3cn3mp] {
        transform: none;
    }

    .turn[b-7mzt3cn3mp] {
        --delay-out: 820ms;
    }
}
/* /Components/Combat/CombatVictoryFlourish.razor.rz.scp.css */
/* Durées et décalages de la séquence, regroupés pour que le montage reste lisible d'un coup d'œil.
   Total = 6600 ms, valeur reprise par CombatTracker pour démonter le composant (constante
   VictoryFlourishDuration) et par le composant lui-même pour le fondu sonore (FadeStartMs /
   FadeDurationMs, calés sur --delay-out / --duration-out) : toute retouche ici doit y être reportée.

   Séquence bien plus longue que les deux autres annonces de combat (2,0 s pour l'ouverture, 1,2 s
   pour le passage de tour) : celle-ci joue une fois par combat gagné, laisse le temps de regarder
   les portraits du groupe apparaître un à un, et accompagne une fanfare. */
.victory[b-g3t13yyvgm] {
    --duration-scrim: 260ms;
    --duration-rays: 22s;
    --duration-burst: 900ms;
    --duration-title: 620ms;
    --duration-portrait: 460ms;
    --duration-subtitle: 420ms;
    --duration-out: 900ms;
    --delay-title: 180ms;
    --delay-portraits: 700ms;
    /* Écart entre deux médaillons : le groupe arrive en cortège, pas d'un bloc. */
    --stagger-portrait: 140ms;
    --delay-subtitle: 1500ms;
    --delay-out: 5700ms;

    --portrait-size: 92px;

    position: fixed;
    inset: 0;
    /* Purement décoratif : ne doit jamais intercepter un clic du MJ, qui enchaîne souvent sur la
       journalisation du combat sans attendre la fin. */
    pointer-events: none;
    /* Au-dessus des barres collantes de la page, sous les dialogues modaux éventuels. */
    z-index: 1080;
    /* Sortie appliquée au calque entier : le composant est démonté juste après, ce fondu évite la
       disparition sèche entre la fin de la séquence et le rendu suivant. */
    animation: victory-out-b-g3t13yyvgm var(--duration-out) ease-in var(--delay-out) forwards;
}

.victory-scrim[b-g3t13yyvgm] {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 42%, rgba(201, 162, 39, 0.22) 0%, transparent 55%),
        rgba(8, 6, 5, 0.9);
    animation: victory-fade-in-b-g3t13yyvgm var(--duration-scrim) ease-out forwards;
}

/* Gloire en rayons : un dégradé conique répété, tourné très lentement et estompé vers les bords
   par un masque radial. Sans le masque, les rayons se terminent en coin d'écran et se lisent
   comme un motif de fond plutôt que comme une lumière. */
.victory-rays[b-g3t13yyvgm] {
    position: absolute;
    left: 50%;
    top: 42%;
    width: 200vmax;
    height: 200vmax;
    transform: translate(-50%, -50%);
    background: repeating-conic-gradient(
        from 0deg,
        rgba(232, 196, 104, 0.13) 0deg 5deg,
        transparent 5deg 15deg);
    -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 34%);
    mask-image: radial-gradient(circle, #000 0%, transparent 34%);
    opacity: 0;
    animation:
        victory-rays-in-b-g3t13yyvgm var(--duration-title) ease-out var(--delay-title) forwards,
        victory-rays-spin-b-g3t13yyvgm var(--duration-rays) linear infinite;
}

.victory-content[b-g3t13yyvgm] {
    position: absolute;
    left: 0;
    right: 0;
    top: 42%;
    transform: translateY(-50%);
    text-align: center;
}

/* Éclat unique derrière le titre, au moment où il se pose. Ancré sur .victory-content et non sur
   le titre lui-même : le titre porte déjà une animation d'entrée, et deux transform concurrents
   sur le même élément demandent une composition qui ne vaut pas ce halo. */
.victory-burst[b-g3t13yyvgm] {
    position: absolute;
    left: 50%;
    top: 0.5em;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    border-radius: 50%;
    background: radial-gradient(circle, #FFF8E2 0%, var(--dnd-gold-bright) 30%, rgba(201, 162, 39, 0) 70%);
    opacity: 0;
    animation: victory-burst-b-g3t13yyvgm var(--duration-burst) ease-out var(--delay-title) forwards;
}

.victory-title[b-g3t13yyvgm] {
    position: relative;
    font-family: 'Cinzel', serif;
    font-size: clamp(2.1rem, 6.5vw, 3.4rem);
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--dnd-gold-bright);
    text-shadow: 0 0 34px rgba(201, 162, 39, 0.45), 0 2px 16px rgba(8, 6, 5, 0.95);
    /* Compense l'interlettrage de la dernière capitale, qui décentrerait le mot. */
    margin: 0 0 0 0.3em;
    opacity: 0;
    animation: victory-title-in-b-g3t13yyvgm var(--duration-title) cubic-bezier(0.2, 0.8, 0.3, 1) var(--delay-title) forwards;
}

/* Enveloppe qui se replie : un groupe de six personnages à 92 px déborde d'un écran de téléphone,
   et le combat peut en compter davantage (familiers et invocations sont des jetons « autre », mais
   rien n'interdit deux tables réunies). */
.victory-portraits[b-g3t13yyvgm] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.9rem;
    margin: 1.6rem auto 0;
    max-width: min(46rem, 90%);
}

.victory-portrait[b-g3t13yyvgm] {
    width: var(--portrait-size);
    height: var(--portrait-size);
    border-radius: 50%;
    background: var(--dnd-bg-3);
    box-shadow: 0 0 0 3px var(--dnd-bg-3), 0 0 26px rgba(201, 162, 39, 0.4);
    opacity: 0;
    animation: victory-portrait-in-b-g3t13yyvgm var(--duration-portrait) cubic-bezier(0.2, 0.9, 0.3, 1.25)
        calc(var(--delay-portraits) + var(--portrait-index) * var(--stagger-portrait)) forwards;
}

/* Un personnage à 0 PV a gagné le combat comme les autres, mais il l'a fini par terre : médaillon
   éteint plutôt qu'absent, l'écarter du cortège serait un contresens. */
.victory-portrait.is-down[b-g3t13yyvgm] {
    filter: grayscale(1);
    box-shadow: 0 0 0 3px var(--dnd-bg-3);
}

/* L'avatar de combat est figé à 40px pour l'ordre de tour : ici les portraits sont le sujet. */
.victory-portrait[b-g3t13yyvgm]  .tavern-combat-avatar {
    width: 100%;
    height: 100%;
    border-width: 2px;
}

.victory-portrait[b-g3t13yyvgm]  .tavern-combat-avatar span {
    font-size: 36px;
}

.victory-subtitle[b-g3t13yyvgm] {
    font-size: 0.78rem;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    color: var(--dnd-label-gold);
    text-shadow: 0 1px 10px rgba(8, 6, 5, 0.95);
    margin: 1.5rem auto 0;
    max-width: min(34rem, 88%);
    text-wrap: balance;
    opacity: 0;
    animation: victory-subtitle-in-b-g3t13yyvgm var(--duration-subtitle) ease-out var(--delay-subtitle) forwards;
}

.victory-motes[b-g3t13yyvgm] {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

/* Braises montantes, sur toute la hauteur de l'écran : elles occupent le vide autour du bloc
   central pendant les quelques secondes où il monopolise la page. */
.victory-mote[b-g3t13yyvgm] {
    position: absolute;
    left: var(--mote-x);
    bottom: -12px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--dnd-gold-bright);
    box-shadow: 0 0 8px rgba(232, 196, 104, 0.75);
    opacity: 0;
    animation: victory-mote-b-g3t13yyvgm var(--mote-duration) ease-out var(--mote-delay) infinite;
}

@keyframes victory-fade-in-b-g3t13yyvgm {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes victory-rays-in-b-g3t13yyvgm {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes victory-rays-spin-b-g3t13yyvgm {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes victory-burst-b-g3t13yyvgm {
    0% { opacity: 0; transform: scale(0.4); }
    14% { opacity: 1; transform: scale(6); }
    100% { opacity: 0; transform: scale(16); }
}

@keyframes victory-title-in-b-g3t13yyvgm {
    0% { opacity: 0; letter-spacing: 0.72em; transform: scale(1.06); }
    100% { opacity: 1; letter-spacing: 0.3em; transform: scale(1); }
}

@keyframes victory-portrait-in-b-g3t13yyvgm {
    0% { opacity: 0; transform: scale(0.5) translateY(14px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes victory-subtitle-in-b-g3t13yyvgm {
    0% { opacity: 0; transform: translateY(6px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes victory-mote-b-g3t13yyvgm {
    0% { opacity: 0; transform: translate(0, 0) scale(0.6); }
    12% { opacity: 0.9; }
    75% { opacity: 0.7; }
    100% { opacity: 0; transform: translate(var(--mote-drift), -102vh) scale(0.2); }
}

@keyframes victory-out-b-g3t13yyvgm {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* Six médaillons de 92 px plus leurs gouttières dépassent la largeur d'un téléphone : ils
   passeraient à la ligne deux par deux plutôt que de former un cortège. */
@media (max-width: 480px) {
    .victory[b-g3t13yyvgm] {
        --portrait-size: 68px;
    }

    .victory-portraits[b-g3t13yyvgm] {
        gap: 0.6rem;
        margin-top: 1.2rem;
    }
}

/* Écran bas (portable en paysage) : les portraits passeraient sous la ligne de flottaison. */
@media (max-height: 560px) {
    .victory[b-g3t13yyvgm] {
        --portrait-size: 60px;
    }

    .victory-content[b-g3t13yyvgm] {
        top: 46%;
    }

    .victory-portraits[b-g3t13yyvgm] {
        margin-top: 1rem;
    }

    .victory-subtitle[b-g3t13yyvgm] {
        margin-top: 0.9rem;
    }
}

/* Mouvement réduit : ni rayons tournants, ni braises, ni éclat — l'annonce et les portraits
   restent, en fondu sur place. La règle transition: none de dnd-theme.css ne couvre pas les
   animations, d'où ce bloc. La fanfare, elle, n'est pas du mouvement et continue de jouer. */
@media (prefers-reduced-motion: reduce) {
    .victory-rays[b-g3t13yyvgm],
    .victory-motes[b-g3t13yyvgm],
    .victory-burst[b-g3t13yyvgm] {
        display: none;
    }

    .victory-title[b-g3t13yyvgm],
    .victory-portrait[b-g3t13yyvgm],
    .victory-subtitle[b-g3t13yyvgm] {
        animation-name: victory-fade-in-b-g3t13yyvgm;
        animation-duration: 320ms;
        transform: none;
    }

    .victory-title[b-g3t13yyvgm] {
        letter-spacing: 0.3em;
        animation-delay: 0ms;
    }

    .victory-portrait[b-g3t13yyvgm] {
        animation-delay: calc(var(--portrait-index) * 60ms);
    }

    .victory-subtitle[b-g3t13yyvgm] {
        animation-delay: 320ms;
    }

    /* --delay-out n'est pas raccourci ici, contrairement à l'ouverture de combat : il cale aussi le
       fondu de la fanfare (FadeStartMs côté composant), qui continuerait de jouer un temps sur un
       écran déjà revenu à la page. */
}
/* /Components/GmNotes/GmItemSheetModal.razor.rz.scp.css */
/* La description n'est pas tronquee ici, contrairement a la carte de l'onglet Objets : celle-ci
   vit dans une grille et doit garder une hauteur reguliere, la fiche est ouverte pour etre lue. */
.gm-item-note[b-4sgbzu7upu] {
    margin: 0 0 4px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--dnd-ink-dim);
    white-space: pre-wrap;
}

/* Une fiche de campagne fournie porte une dizaine d'effets : la modale defile plutot que de
   depasser la fenetre. */
.tavern-figure-sheet[b-4sgbzu7upu] {
    max-height: min(80vh, 760px);
    overflow-y: auto;
}
/* /Components/GmNotes/GmNoteMarkdownEditor.razor.rz.scp.css */
.gm-md-editor[b-xh8thol1ue] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* La barre n'est plus une carte posée au-dessus du champ : elle est rendue dans la bande pleine
   largeur de la page (voir ToolbarSectionName), qui porte son fond et son filet. Elle n'a donc plus
   à être collante — la bande ne défile pas, seul le document défile sous elle. */
.gm-md-toolbar[b-xh8thol1ue] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.15rem;
    width: 100%;
}

.gm-md-sep[b-xh8thol1ue] {
    width: 1px;
    align-self: stretch;
    margin: 0.15rem 0.3rem;
    background: var(--dnd-border);
}

.gm-md-spacer[b-xh8thol1ue] {
    flex: 1 1 auto;
}

.gm-md-btn[b-xh8thol1ue] {
    min-width: 1.9rem;
    padding: 0.25rem 0.45rem;
    color: var(--dnd-ink-dim);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 5px;
    font-size: 0.9rem;
    line-height: 1.4;
    cursor: pointer;
}

.gm-md-btn.wide[b-xh8thol1ue] {
    min-width: auto;
    font-size: 0.85rem;
}

.gm-md-btn:hover[b-xh8thol1ue] {
    color: var(--dnd-ink);
    background: rgba(201, 162, 39, 0.12);
    border-color: var(--dnd-border);
}

.gm-md-btn.active[b-xh8thol1ue] {
    color: var(--dnd-gold);
    border-color: var(--dnd-gold);
}

.gm-md-btn.bold[b-xh8thol1ue] { font-weight: 700; }
.gm-md-btn.italic[b-xh8thol1ue] { font-style: italic; }
.gm-md-btn.underline[b-xh8thol1ue] { text-decoration: underline; }
.gm-md-btn.strike[b-xh8thol1ue] { text-decoration: line-through; }
.gm-md-btn.code[b-xh8thol1ue] { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 0.75rem; }

.gm-md-style[b-xh8thol1ue] {
    padding: 0.25rem 0.4rem;
    color: var(--dnd-ink);
    background: var(--dnd-panel-2);
    border: 1px solid var(--dnd-border);
    border-radius: 5px;
    font-family: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}

.gm-md-panel-wrap[b-xh8thol1ue] {
    position: relative;
}

.gm-md-panel-backdrop[b-xh8thol1ue] {
    position: fixed;
    inset: 0;
    z-index: 10;
}

.gm-md-panel-menu[b-xh8thol1ue] {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    z-index: 11;
    min-width: 12rem;
    padding: 0.25rem;
    background: var(--dnd-panel-1);
    border: 1px solid var(--dnd-border);
    border-radius: 8px;
    box-shadow: 0 12px 28px rgb(0 0 0 / 45%);
}

.gm-md-panel-menu button[b-xh8thol1ue] {
    display: block;
    width: 100%;
    padding: 0.4rem 0.55rem;
    color: var(--dnd-ink);
    background: transparent;
    border: 0;
    border-radius: 5px;
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
}

.gm-md-panel-menu button:hover[b-xh8thol1ue] {
    background: rgba(201, 162, 39, 0.12);
}

/* Chasse fixe : c'est ce qui aligne les barres verticales d'un tableau pendant qu'on le tape, et
   la seule chose qui rende la syntaxe de tableau supportable à la main. */
.gm-md-input[b-xh8thol1ue] {
    width: 100%;
    min-height: 60vh;
    padding: 0.5rem 0;
    overflow: hidden;
    color: var(--dnd-ink);
    background: transparent;
    border: 0;
    outline: none;
    resize: none;
    font-family: ui-monospace, "Cascadia Code", Consolas, "Courier New", monospace;
    font-size: 0.95rem;
    line-height: 1.7;
    tab-size: 2;
}

.gm-md-input[b-xh8thol1ue]::placeholder {
    color: var(--dnd-ink-faint);
}
/* /Components/Layout/GuestLayout.razor.rz.scp.css */
.tavern-guest[b-ytm28ggdj0] {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    position: relative;
    overflow: clip;
}

.tavern-guest[b-ytm28ggdj0]::before {
    content: "";
    position: absolute;
    top: -10%;
    left: 50%;
    transform: translateX(-50%);
    width: 700px;
    height: 700px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201, 162, 39, 0.08) 0%, transparent 65%);
    pointer-events: none;
}

#blazor-error-ui[b-ytm28ggdj0] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-ytm28ggdj0] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.tavern-app[b-1z8sf0gmgp] {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.tavern-main[b-1z8sf0gmgp] {
    flex: 1;
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
    padding: clamp(20px, 5vw, 44px) clamp(14px, 4vw, 32px) 60px;
    box-sizing: border-box;
}

.tavern-main-wide[b-1z8sf0gmgp] {
    max-width: 1320px;
}

/* Le carnet MJ occupe la fenetre : trois colonnes (arborescence, document, sommaire) n'entrent pas
   dans 1040px sans etouffer le document. Les marges laterales tombent a un filet — c'est la largeur
   de lecture qui borne le texte, pas la page.

   La marge verticale vaut --gm-frame-gap (GmNotesPage.razor.css), dont le cadre se sert pour
   calculer sa hauteur : les deux valeurs doivent rester identiques, sinon le cadre deborde de la
   fenetre ou laisse un vide sous lui. */
.tavern-main-full[b-1z8sf0gmgp] {
    max-width: 1920px;
    padding: clamp(10px, 1.5vw, 20px) clamp(10px, 1.5vw, 24px);
}

#blazor-error-ui[b-1z8sf0gmgp] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-1z8sf0gmgp] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.tavern-topnav[b-25n2s1cr4x] {
    position: sticky;
    top: 0;
    /* Doit rester au-dessus du conteneur .leaflet-top/.leaflet-bottom (z-index 1000 dans
       leaflet.css - le z-index 800 n'est que celui de .leaflet-control À L'INTÉRIEUR de ce
       conteneur) : sinon, sur la page Cartes, la barre de navigation sticky se retrouve
       visuellement sous les boutons de zoom une fois la page défilée. Reste toutefois sous les
       tiroirs modaux (voir MapExplorerPage.razor.css), qui doivent couvrir la navigation quand
       ils sont ouverts. */
    z-index: 1005;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 28px;
    background: rgba(12, 10, 8, 0.85);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid #3A3226;
    flex-wrap: wrap;
}

/* Posée par MapExplorer.razor.js sur <body> pendant le plein écran d'une carte : la superposition
   plein écran est censée couvrir cette barre par empilement CSS (son z-index est plus élevé), mais
   ça suppose qu'aucun ancêtre du conteneur plein écran ne gagne son propre contexte d'empilement
   entre-temps. Masquer la barre explicitement rend le plein écran fiable quel que soit l'état de
   cet empilement. */
body.map-fullscreen-active .tavern-topnav[b-25n2s1cr4x] {
    display: none;
}

.tavern-brand[b-25n2s1cr4x] {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

/* Disque noir et halo dore diffus, sans cerclage : un trait de 1px enfermait le blason dans un
   badge. Le halo est resserre par rapport aux cadres de 64 et 72px, a la mesure des 32px.
   logo.png remplit le disque : son embleme est centre avec de la marge et son fond est noir, donc
   le border-radius ne coupe que du noir. Les icones de l'application installee
   (wwwroot/icons/app) sont d'autres fichiers et gardent leur propre cadrage. */
.tavern-brand-logo[b-25n2s1cr4x] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #000;
    box-shadow: 0 0 0 1px rgba(201, 162, 39, 0.16), 0 0 12px rgba(201, 162, 39, 0.22), 0 0 26px rgba(201, 162, 39, 0.1);
    object-fit: cover;
}

.tavern-brand-text[b-25n2s1cr4x] {
    font-family: Cinzel, serif;
    font-size: 12px;
    letter-spacing: 0.2em;
    color: #EDE3C8;
}

.tavern-nav-actions[b-25n2s1cr4x] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* Backdrop transparent plein ecran : capte le clic exterieur pour fermer un menu deroulant
   ouvert (Personnages/Compendium). Sous .tavern-nav-dropdown-menu (z-index 60, voir
   dnd-theme.css) pour ne pas passer devant le menu lui-meme. */
.tavern-nav-backdrop[b-25n2s1cr4x] {
    position: fixed;
    inset: 0;
    z-index: 55;
    background: transparent;
}

.tavern-nav-item[b-25n2s1cr4x]  .tavern-nav-btn {
    font-family: Cinzel, serif;
    font-size: 11px;
    letter-spacing: 0.06em;
    padding: 9px 14px;
    border-radius: 7px;
    border: 1px solid #3A3226;
    background: transparent;
    color: #EDE3C8;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
}

.tavern-nav-item[b-25n2s1cr4x]  .tavern-nav-btn:hover {
    background: rgba(201, 162, 39, 0.1);
}

.tavern-nav-item[b-25n2s1cr4x]  .tavern-nav-btn.active {
    border-color: #C9A227;
    background: rgba(201, 162, 39, 0.13);
    color: #E8C468;
}

/* Bouton compte : rond plutot que pilule, pour se lire comme une icone de profil et non comme
   un lien de plus dans la rangee (repere visuel constant, meme quand les autres boutons
   changent de largeur). */
.tavern-avatar-btn[b-25n2s1cr4x] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid #3A3226;
    background: transparent;
    color: #EDE3C8;
    cursor: pointer;
}

.tavern-avatar-btn:hover[b-25n2s1cr4x],
.tavern-avatar-btn[aria-expanded="true"][b-25n2s1cr4x] {
    border-color: #C9A227;
    background: rgba(201, 162, 39, 0.1);
    color: #E8C468;
}

/* Le menu Compte est le dernier element de la rangee : ancre a droite comme les deux autres
   menus deroulants (Personnages/Compendium, dnd-theme.css) le ferait deborder de la fenetre. */
.tavern-nav-dropdown-menu-right[b-25n2s1cr4x] {
    left: auto;
    right: 0;
}

.tavern-nav-dropdown-divider[b-25n2s1cr4x] {
    height: 1px;
    margin: 6px 8px;
    background: var(--dnd-border);
}

.tavern-mobile-menu-btn[b-25n2s1cr4x] {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 7px;
    border: 1px solid #3A3226;
    background: transparent;
    color: #EDE3C8;
    cursor: pointer;
}

.tavern-mobile-menu-btn:hover[b-25n2s1cr4x] {
    border-color: #C9A227;
}

.tavern-nav-mobile-label[b-25n2s1cr4x] {
    display: none;
}

@media (max-width: 860px) {
    .tavern-brand-text[b-25n2s1cr4x] {
        display: none;
    }

    .tavern-mobile-menu-btn[b-25n2s1cr4x] {
        display: flex;
    }

    .tavern-nav-actions[b-25n2s1cr4x] {
        display: none;
    }

    .tavern-nav-actions.tavern-nav-actions-open[b-25n2s1cr4x] {
        display: flex;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        padding: 12px 16px 16px;
        background: rgba(12, 10, 8, 0.97);
        border-bottom: 1px solid #3A3226;
        box-shadow: 0 16px 30px rgba(0, 0, 0, 0.4);
        /* Doit rester au-dessus de la barre de navigation elle-même (1005) qui la contient. */
        z-index: 1006;
    }

    .tavern-nav-actions.tavern-nav-actions-open .tavern-nav-item[b-25n2s1cr4x],
    .tavern-nav-actions.tavern-nav-actions-open .tavern-nav-dropdown[b-25n2s1cr4x] {
        width: 100%;
    }

    .tavern-nav-actions.tavern-nav-actions-open[b-25n2s1cr4x]  .tavern-nav-btn,
    .tavern-nav-actions.tavern-nav-actions-open .tavern-nav-dropdown-btn[b-25n2s1cr4x] {
        width: 100%;
        text-align: left;
    }

    .tavern-nav-actions.tavern-nav-actions-open .tavern-nav-dropdown-menu[b-25n2s1cr4x] {
        position: static;
        margin: 4px 0 0 14px;
        box-shadow: none;
        min-width: 0;
    }

    .tavern-nav-actions.tavern-nav-actions-open .tavern-search-btn[b-25n2s1cr4x],
    .tavern-nav-actions.tavern-nav-actions-open .tavern-avatar-btn[b-25n2s1cr4x] {
        width: 100%;
        height: auto;
        border-radius: 7px;
        justify-content: flex-start;
        gap: 10px;
        padding: 9px 14px;
    }

    .tavern-nav-actions.tavern-nav-actions-open .tavern-nav-mobile-label[b-25n2s1cr4x] {
        display: inline;
        font-family: Cinzel, serif;
        font-size: 11px;
        letter-spacing: 0.06em;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-hhx78jwvjm],
.components-reconnect-repeated-attempt-visible[b-hhx78jwvjm],
.components-reconnect-failed-visible[b-hhx78jwvjm],
.components-pause-visible[b-hhx78jwvjm],
.components-resume-failed-visible[b-hhx78jwvjm],
.components-rejoining-animation[b-hhx78jwvjm] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-hhx78jwvjm],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-hhx78jwvjm],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-hhx78jwvjm],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-hhx78jwvjm],
#components-reconnect-modal.components-reconnect-retrying[b-hhx78jwvjm],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-hhx78jwvjm],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-hhx78jwvjm],
#components-reconnect-modal.components-reconnect-failed[b-hhx78jwvjm],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-hhx78jwvjm] {
    display: block;
}


#components-reconnect-modal[b-hhx78jwvjm] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-hhx78jwvjm 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-hhx78jwvjm 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-hhx78jwvjm 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-hhx78jwvjm]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-hhx78jwvjm 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-hhx78jwvjm {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-hhx78jwvjm {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-hhx78jwvjm {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-hhx78jwvjm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-hhx78jwvjm] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-hhx78jwvjm] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-hhx78jwvjm] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-hhx78jwvjm] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-hhx78jwvjm] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-hhx78jwvjm] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-hhx78jwvjm 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-hhx78jwvjm] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-hhx78jwvjm {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Maps/MapExplorer.razor.rz.scp.css */
.map-explorer[b-8oxuad36b7] {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.5rem;
    height: 100%;
    min-height: 500px;
}

/* Regroupe barre d'outils, barre de brouillard et message d'erreur : un seul bloc positionné en
   plein écran (voir plus bas), plutôt que chaque barre avec son propre "top" en dur — deux valeurs
   indépendantes se chevauchent dès que l'une d'elles passe sur plusieurs lignes (mobile, peu de
   place horizontale). Transparent en mode normal : le gap vient alors du parent .map-explorer. */
.map-explorer-bars[b-8oxuad36b7] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.map-explorer-toolbar[b-8oxuad36b7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.map-explorer-placement-hint[b-8oxuad36b7] {
    font-size: 0.85rem;
    color: #c6a35a;
}

/* Repère du bandeau de combat, qui se range contre l'un des quatre bords de la carte. Sans elle,
   ses coordonnées portent sur .map-explorer, barre d'outils comprise : contre le bord haut il se
   serait posé sur la barre au lieu du haut du canvas, et à une distance d'elle qui varie avec le
   nombre de lignes qu'elle occupe.

   Aucune min-height : la valeur automatique laisse le plancher de 460px du canvas s'appliquer
   comme lorsqu'il était l'enfant direct. Le plein écran la remet à zéro (plus bas) pour que le
   canvas suive la fenêtre. */
.map-explorer-stage[b-8oxuad36b7] {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.map-explorer-canvas[b-8oxuad36b7] {
    width: 100%;
    flex: 1;
    min-height: 460px;
    background: #1b1712;
    border-radius: 6px;
    border: 1px solid rgba(198, 163, 90, 0.35);
}

/* Plein écran : superposition fixe sur toute la fenêtre. Choisi plutôt que l'API Fullscreen
   native pour un rendu identique partout et entièrement stylable — F11 reste disponible par-dessus
   si on veut aussi masquer le chrome du navigateur. */
.map-explorer.fullscreen[b-8oxuad36b7] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    gap: 0;
    background: #14110c;
}

.map-explorer.fullscreen .map-explorer-stage[b-8oxuad36b7] {
    min-height: 0;
}

.map-explorer.fullscreen .map-explorer-canvas[b-8oxuad36b7] {
    height: 100%;
    min-height: 0;
    border: none;
    border-radius: 0;
}

/* Le bandeau d'ordre de tour épouse les coins arrondis du canvas en mode normal ; en plein écran
   la carte est à bords francs, le bandeau aussi. */
.map-explorer.fullscreen[b-8oxuad36b7]  .combat-order-banner {
    border-radius: 0;
}

/* Le bandeau de combat et les barres de la carte se disputent les bords en plein écran, seul mode
   où les barres flottent au-dessus du canvas. Plutôt que de mesurer un bandeau dont l'épaisseur
   dépend du nombre de combattants, chacun cède la place à l'autre par une règle fixe. Sans combat,
   la classe n'est pas posée et rien de tout ceci ne s'applique. */
.map-explorer.fullscreen.combat-banner-top .map-explorer-bars[b-8oxuad36b7],
.map-explorer.fullscreen.combat-banner-top .map-explorer-tools-toggle[b-8oxuad36b7] {
    top: auto;
    bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
}

/* Contre un bord vertical, les barres gardent le haut mais cessent de s'étendre jusqu'à la colonne.
   Les 7rem que leur règle de base réserve déjà leur laissent 56px de marge de chaque côté : il ne
   reste à ajouter que ce dont la colonne dépasse cette marge, d'où une valeur qui suit l'épaisseur
   du bandeau — et qui tombe à zéro en téléphone, où la colonne est plus mince que la marge et où
   rétrécir les barres les rendrait illisibles bien avant de régler quoi que ce soit. */
.map-explorer[b-8oxuad36b7] {
    --combat-banner-clearance: 6rem;
}

@media (max-width: 991.98px) {
    .map-explorer[b-8oxuad36b7] {
        --combat-banner-clearance: 4.5rem;
    }
}

@media (max-width: 575.98px) {
    .map-explorer[b-8oxuad36b7] {
        --combat-banner-clearance: 0rem;
    }
}

.map-explorer.fullscreen.combat-banner-left .map-explorer-bars[b-8oxuad36b7],
.map-explorer.fullscreen.combat-banner-right .map-explorer-bars[b-8oxuad36b7] {
    max-width: calc(100% - 7rem - 2 * var(--combat-banner-clearance));
}

/* Le bouton des outils occupe le coin haut droit : contre le bord droit, il se poserait sur le
   premier médaillon de la colonne. Il passe à gauche, où les barres rétrécies lui laissent la place. */
.map-explorer.fullscreen.combat-banner-right .map-explorer-tools-toggle[b-8oxuad36b7] {
    right: auto;
    left: calc(0.75rem + env(safe-area-inset-left, 0px));
}

/* L'annonce de victoire du bandeau se pose à 1080, calé sur la fiche de combat dont les barres
   collantes montent bien moins haut. Ici elle passerait sous la barre d'outils (1200) et sous le
   bouton qui la masque (1300) : le voile couvrirait la carte en laissant flotter les boutons
   par-dessus. Elle passe donc au-dessus de tout ce que le plein écran empile. */
.map-explorer[b-8oxuad36b7]  .victory {
    z-index: 1400;
}

/* Les barres passent au-dessus de la carte, empilées dans .map-explorer-bars : un seul point de
   positionnement (top + centrage horizontal) pour tout le groupe, quel que soit le nombre de
   lignes que chaque barre occupe. Avant, chaque barre avait son propre "top" en dur (0.75rem et
   3.9rem) calibré pour une barre d'outils sur une seule ligne : dès qu'elle passait sur plusieurs
   lignes (peu de largeur, comme en mobile), la barre de brouillard restait clouée à 3.9rem et les
   deux se chevauchaient. */
.map-explorer.fullscreen .map-explorer-bars[b-8oxuad36b7] {
    position: absolute;
    top: calc(0.75rem + env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%);
    z-index: 1200;
    max-width: calc(100% - 7rem);
    align-items: center;
    gap: 0.4rem;
}

.map-explorer.fullscreen .map-explorer-toolbar[b-8oxuad36b7],
.map-explorer.fullscreen .map-explorer-fog-toolbar[b-8oxuad36b7],
.map-explorer.fullscreen .map-explorer-error[b-8oxuad36b7] {
    justify-content: center;
    padding: 0.45rem 0.7rem;
    background: rgba(28, 24, 17, 0.92);
    border: 1px solid rgba(198, 163, 90, 0.45);
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55);
    margin: 0;
}

.map-explorer.fullscreen .map-explorer-error[b-8oxuad36b7] {
    border-color: rgba(198, 90, 90, 0.6);
}

.map-explorer.fullscreen .map-explorer-tools-hidden[b-8oxuad36b7] {
    display: none;
}

/* Bouton dédié, hors des barres qu'il contrôle : il doit rester cliquable même quand elles sont
   masquées, sinon impossible de les rafficher. Cible tactile 44px (recommandation WCAG 2.5.5/2.5.8) :
   le contenu ("☰"/"✕") ne fait que ~16px, la zone cliquable doit être bien plus grande sur mobile. */
.map-explorer-tools-toggle[b-8oxuad36b7] {
    position: absolute;
    top: calc(0.75rem + env(safe-area-inset-top, 0px));
    right: calc(0.75rem + env(safe-area-inset-right, 0px));
    z-index: 1300;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(28, 24, 17, 0.92);
    border: 1px solid rgba(198, 163, 90, 0.45);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55);
}

[b-8oxuad36b7] .map-explorer-fog-canvas {
    position: absolute;
    inset: 0;
    z-index: 620;
    pointer-events: none;
}

.map-explorer-fog-toolbar[b-8oxuad36b7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
}

.map-explorer-fog-toolbar input[type="range"][b-8oxuad36b7] {
    width: 100px;
}

.map-explorer-brush-info[b-8oxuad36b7] {
    color: #c6a35a;
    font-size: 0.75rem;
    white-space: nowrap;
}

/* Cibles tactiles Leaflet (zoom +/-) : 26px par défaut, 30px seulement avec la classe
   .leaflet-touch que Leaflet ajoute lui-même sur détection tactile — encore sous les 44px
   recommandés (WCAG 2.5.5/2.5.8). Ciblé uniquement sur pointeur grossier pour ne pas agrandir
   inutilement les contrôles sur desktop à la souris. */
@media (pointer: coarse) {
    [b-8oxuad36b7] .leaflet-touch .leaflet-bar a {
        width: 44px;
        height: 44px;
        line-height: 44px;
    }
}

[b-8oxuad36b7] .map-marker-icon-wrapper,
[b-8oxuad36b7] .map-label-wrapper {
    background: transparent;
    border: none;
}

[b-8oxuad36b7] .map-marker-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 1.1rem;
    line-height: 1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
    border: 2px solid #c6a35a;
    background: #2a2318;
}

[b-8oxuad36b7] .map-marker-icon-playermarker {
    border-color: #4f8fd1;
}

[b-8oxuad36b7] .map-marker-icon-dimmed {
    opacity: 0.55;
    border-style: dashed;
    filter: grayscale(0.4);
}

[b-8oxuad36b7] .map-marker-tooltip {
    background: #211c14;
    color: #f0e6cf;
    border: 1px solid rgba(198, 163, 90, 0.5);
    border-radius: 4px;
    font-family: "Cinzel", serif;
    font-size: 0.8rem;
    padding: 3px 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

[b-8oxuad36b7] .map-marker-tooltip::before {
    border-top-color: rgba(198, 163, 90, 0.5);
}

[b-8oxuad36b7] .map-label-text {
    padding: 2px 6px;
    color: #f0e6cf;
    font-family: "Cinzel", serif;
    font-size: 0.85rem;
    text-shadow: 0 1px 3px #000, 0 0 6px #000;
    white-space: nowrap;
}

/* Panneau détail / éditeurs : latéral à droite en desktop, bottom-sheet en mobile. */
[b-8oxuad36b7] .map-side-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(340px, 90vw);
    overflow-y: auto;
    background: #211c14;
    border-left: 1px solid rgba(198, 163, 90, 0.35);
    padding: 1rem;
    box-shadow: -4px 0 12px rgba(0, 0, 0, 0.4);
    z-index: 1000;
}

[b-8oxuad36b7] .map-side-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

[b-8oxuad36b7] .map-side-panel-header h3 {
    font-family: "Cinzel", serif;
    font-size: 1.05rem;
    margin: 0;
}

[b-8oxuad36b7] .map-side-panel-description {
    color: #e8ddc4;
    font-size: 0.9rem;
}

@media (max-width: 767.98px) {
    [b-8oxuad36b7] .map-side-panel {
        top: auto;
        left: 0;
        right: 0;
        width: auto;
        max-height: 60vh;
        border-left: none;
        border-top: 1px solid rgba(198, 163, 90, 0.35);
        border-radius: 12px 12px 0 0;
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.4);
    }
}
/* /Components/Pages/Account.razor.rz.scp.css */
/* Plus etroit que les ecrans de liste : un formulaire de trois champs etale sur 60rem se lit mal,
   la ligne de saisie devenant plus longue que le regard ne la suit. */
.tavern-account[b-jz7p21fike] {
    max-width: 34rem;
    margin: 0 auto;
}

.tavern-account-panel[b-jz7p21fike] {
    padding: 1.5rem;
    margin-top: 1.25rem;
}

.tavern-account-note[b-jz7p21fike] {
    margin-top: 1.25rem;
    color: var(--bs-secondary-color);
    font-size: 0.9rem;
}
/* /Components/Pages/AdminInvitations.razor.rz.scp.css */
.tavern-invitations[b-gbfauokgpm] {
    max-width: 60rem;
    margin: 0 auto;
}

.tavern-invitations-intro[b-gbfauokgpm] {
    color: var(--bs-secondary-color);
    margin-bottom: 1.5rem;
}

/* Le champ occupe la place disponible, le bouton garde sa largeur naturelle ; en dessous de
   30rem la ligne se replie pour rester utilisable au pouce sur mobile. */
.tavern-invite-row[b-gbfauokgpm] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.tavern-invite-row .form-control[b-gbfauokgpm] {
    flex: 1 1 18rem;
}

.tavern-invite-link[b-gbfauokgpm] {
    margin-top: 1.25rem;
    padding: 1rem;
    border: 1px solid var(--bs-warning-border-subtle, rgba(255, 193, 7, 0.4));
    border-radius: 0.5rem;
    background: rgba(255, 193, 7, 0.08);
}

.tavern-invite-warning[b-gbfauokgpm] {
    margin: 0.5rem 0;
    font-size: 0.9rem;
}

/* Le lien est long et sans espaces : sans ce retour à la ligne forcé, il déborderait
   horizontalement de son encart au lieu de rester entièrement lisible. */
.tavern-invite-url[b-gbfauokgpm] {
    display: block;
    margin-bottom: 0.75rem;
    padding: 0.5rem;
    border-radius: 0.35rem;
    background: rgba(0, 0, 0, 0.25);
    overflow-wrap: anywhere;
    font-size: 0.85rem;
}

/* Le tableau garde ses colonnes lisibles sur mobile en défilant dans son propre conteneur,
   plutôt qu'en poussant la page entière à défiler horizontalement. */
.tavern-invitations-table[b-gbfauokgpm] {
    overflow-x: auto;
}
/* /Components/Pages/AmbiancesPage.razor.rz.scp.css */
/* Page de préparation des ambiances. Deux colonnes : les pistes à gauche, les ambiances à droite,
   et le geste central va de l'une à l'autre. */

.ambiances-head[b-s1wh37jr0j] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.ambiances-head h1[b-s1wh37jr0j] {
    font-family: 'Cinzel', serif;
    font-size: 26px;
    margin: 2px 0 0;
}

.ambiances-campaign[b-s1wh37jr0j] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ambiances-campaign label[b-s1wh37jr0j] {
    font-family: 'Cinzel', serif;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dnd-label-gold);
}

.ambiances-campaign select[b-s1wh37jr0j] {
    background: var(--dnd-bg-2);
    color: var(--dnd-ink);
    border: 1px solid var(--dnd-border);
    border-radius: 8px;
    padding: 6px 9px;
    font-size: 13px;
}

.ambiances-error[b-s1wh37jr0j] {
    font-size: 13px;
    color: var(--dnd-red-text);
    margin: 0 0 14px;
}

.ambiances-columns[b-s1wh37jr0j] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;

    /* Le lecteur flotte au-dessus de la page : sans cette réserve, la dernière ambiance resterait
       sous la barre une fois défilé jusqu'en bas, et c'est précisément là qu'on ajoute la
       suivante. */
    padding-bottom: 90px;
}

@media (max-width: 900px) {
    .ambiances-columns[b-s1wh37jr0j] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* La barre passe à trois rangées sous 720 px, la réserve doit suivre. */
@media (max-width: 720px) {
    .ambiances-columns[b-s1wh37jr0j] {
        padding-bottom: 180px;
    }
}

.ambiances-panel[b-s1wh37jr0j] {
    background: linear-gradient(180deg, var(--dnd-panel-1) 0%, var(--dnd-panel-2) 100%);
    border: 1px solid var(--dnd-border);
    border-radius: 14px;
    padding: 16px 18px 18px;
}

.ambiances-panel-head[b-s1wh37jr0j] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.ambiances-panel h2[b-s1wh37jr0j] {
    font-family: 'Cinzel', serif;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dnd-label-gold);
    margin: 0;
}

.ambiances-count[b-s1wh37jr0j] {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--dnd-ink-faint);
}

.ambiances-empty[b-s1wh37jr0j],
.ambiances-hint[b-s1wh37jr0j] {
    font-size: 12px;
    color: var(--dnd-ink-faint);
    margin: 0;
}

.ambiances-listen-hint[b-s1wh37jr0j] {
    margin-top: 10px;
}

/* ------------------------------------------------------------------ téléversement */

.ambiances-upload[b-s1wh37jr0j] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

/* Le champ natif est masqué au profit de son libellé : la mise en forme d'un input[type=file]
   n'est pas portable d'un navigateur à l'autre. Il reste dans le flux (pas de display:none) pour
   demeurer atteignable au clavier et pour que l'interop JS puisse lire sa sélection. */
.ambiances-upload input[type="file"][b-s1wh37jr0j] {
    width: 1px;
    height: 1px;
    opacity: 0;
    position: absolute;
}

.ambiances-upload label[b-s1wh37jr0j] {
    margin: 0;
    cursor: pointer;
}

/* Liseré posé par le module JS pendant qu'un fichier survole la colonne : sans retour visuel,
   rien ne dit que le dépôt est accepté ici. */
.ambiances-dropping[b-s1wh37jr0j] {
    border-color: var(--dnd-gold);
    box-shadow: inset 0 0 0 1px rgba(232, 196, 104, 0.25);
}

/* ------------------------------------------------------------------ pistes */

.ambiances-tracks[b-s1wh37jr0j],
.ambiances-list[b-s1wh37jr0j] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ambiances-tracks > li[b-s1wh37jr0j] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    border-bottom: 1px solid rgba(58, 50, 38, 0.5);
    cursor: grab;
}

.ambiances-tracks > li:hover[b-s1wh37jr0j] {
    background: rgba(201, 162, 39, 0.05);
}

.ambiances-dragged[b-s1wh37jr0j] {
    opacity: 0.4;
}

.ambiances-grip[b-s1wh37jr0j] {
    flex: none;
    color: var(--dnd-ink-faint);
    font-size: 12px;
    letter-spacing: -1px;
}

.ambiances-listen[b-s1wh37jr0j] {
    flex: none;
    background: none;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--dnd-ink-dim);
    font-size: 12px;
    line-height: 1;
    padding: 4px 7px;
    cursor: pointer;
}

.ambiances-listen:hover[b-s1wh37jr0j] {
    color: var(--dnd-gold-bright);
    border-color: var(--dnd-border);
}

.ambiances-listen-on[b-s1wh37jr0j] {
    color: var(--dnd-gold);
    border-color: var(--dnd-border-strong);
}

.ambiances-tracks input[type="text"][b-s1wh37jr0j] {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 4px 6px;
    color: var(--dnd-body-copy);
    font-size: 13px;
}

.ambiances-tracks input[type="text"]:hover[b-s1wh37jr0j],
.ambiances-tracks input[type="text"]:focus[b-s1wh37jr0j] {
    border-color: var(--dnd-border);
    background: var(--dnd-bg-2);
    outline: none;
}

.ambiances-meta[b-s1wh37jr0j] {
    flex: none;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--dnd-ink-faint);
    white-space: nowrap;
}

.ambiances-remove[b-s1wh37jr0j] {
    flex: none;
    background: none;
    border: none;
    color: var(--dnd-ink-faint);
    font-size: 13px;
    line-height: 1;
    padding: 4px 6px;
    cursor: pointer;
}

.ambiances-remove:hover[b-s1wh37jr0j] {
    color: var(--dnd-red-text);
}

/* ------------------------------------------------------------------ création */

.ambiances-new[b-s1wh37jr0j] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.ambiances-new input[type="text"][b-s1wh37jr0j] {
    flex: 1;
    min-width: 130px;
    background: var(--dnd-bg-2);
    border: 1px solid var(--dnd-border);
    border-radius: 8px;
    padding: 6px 9px;
    color: var(--dnd-ink);
    font-size: 13px;
}

.ambiances-icon[b-s1wh37jr0j] {
    flex: 0 0 58px !important;
    min-width: 0;
    text-align: center;
}

/* ------------------------------------------------------------------ ambiances */

.ambiances-card[b-s1wh37jr0j] {
    padding: 10px 12px;
    background: var(--dnd-bg-2);
    border: 1px solid var(--dnd-border);
    border-radius: 12px;
}

.ambiances-card + .ambiances-card[b-s1wh37jr0j] {
    margin-top: 8px;
}

/* Cible du dépôt : la carte survolée par une piste se distingue nettement, sinon on ne sait pas
   dans quelle ambiance on est en train de lâcher. */
.ambiances-card-target[b-s1wh37jr0j] {
    border-color: var(--dnd-gold);
    background: rgba(201, 162, 39, 0.12);
}

.ambiances-card-head[b-s1wh37jr0j] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ambiances-card-head input[type="text"][b-s1wh37jr0j] {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 4px 6px;
    color: var(--dnd-ink);
    font-size: 14px;
}

.ambiances-card-head input[type="text"]:hover[b-s1wh37jr0j],
.ambiances-card-head input[type="text"]:focus[b-s1wh37jr0j] {
    border-color: var(--dnd-border);
    background: var(--dnd-panel-2);
    outline: none;
}

.ambiances-card-name[b-s1wh37jr0j] {
    flex: 1;
    min-width: 0;
}

.ambiances-pin[b-s1wh37jr0j] {
    flex: none;
    background: none;
    border: none;
    padding: 2px 4px;
    font-size: 15px;
    line-height: 1;
    color: var(--dnd-ink-faint);
    cursor: pointer;
}

.ambiances-pin:hover[b-s1wh37jr0j],
.ambiances-pin-on[b-s1wh37jr0j] {
    color: var(--dnd-gold-bright);
}

.ambiances-drop-hint[b-s1wh37jr0j] {
    margin: 8px 0 2px;
    padding: 8px 10px;
    border: 1px dashed var(--dnd-border);
    border-radius: 8px;
    font-size: 12px;
    color: var(--dnd-ink-faint);
    text-align: center;
}

.ambiances-card-tracks[b-s1wh37jr0j] {
    list-style: decimal inside;
    margin: 8px 0 0;
    padding: 0;
}

.ambiances-card-tracks li[b-s1wh37jr0j] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 2px;
    border-top: 2px solid transparent;
    font-size: 13px;
    color: var(--dnd-body-copy);
    cursor: grab;
}

/* Rang visé par une piste en cours de glisser-déposer, qu'elle vienne de l'ambiance elle-même
   (réordonnancement) ou de la colonne des pistes : un liseré au-dessus de la rangée survolée,
   plutôt qu'un fond plein qui se confondrait avec la carte déjà surlignée par .ambiances-card-target. */
.ambiances-track-target[b-s1wh37jr0j] {
    border-top-color: var(--dnd-gold);
}

.ambiances-card-track[b-s1wh37jr0j] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ambiances-card-tracks button[b-s1wh37jr0j] {
    flex: none;
    background: none;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--dnd-ink-dim);
    font-size: 12px;
    padding: 3px 6px;
    cursor: pointer;
}

.ambiances-card-tracks button:hover:not(:disabled)[b-s1wh37jr0j] {
    border-color: var(--dnd-border);
    color: var(--dnd-gold-bright);
}

.ambiances-card-tracks button:disabled[b-s1wh37jr0j] {
    opacity: 0.3;
    cursor: default;
}
/* /Components/Pages/CampaignDetail.razor.rz.scp.css */
/* Grid-template-rows 1fr/0fr : anime la hauteur d'un contenu dont on ne connaît pas la valeur
   exacte a l'avance (le bloc contient un formulaire d'edition de nom en plus de l'image). Le
   frere .tavern-campaign-hero-inner porte l'overflow:hidden necessaire pour que 0fr ecrase
   vraiment le contenu au lieu de le laisser deborder pendant la transition. */
.tavern-campaign-hero-wrap[b-xn7gxz1njc] {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 420ms cubic-bezier(.65, 0, .35, 1);
}

.tavern-campaign-hero-wrap.collapsed[b-xn7gxz1njc] {
    grid-template-rows: 0fr;
}

.tavern-campaign-hero-inner[b-xn7gxz1njc] {
    overflow: hidden;
}

.tavern-campaign-hero[b-xn7gxz1njc] {
    position: relative;
    width: 100%;
    max-width: 640px;
    aspect-ratio: 2 / 1;
    margin: 0 auto 16px;
    overflow: hidden;
    border-radius: 8px;
    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;
    /* Effet de "traveling" : l'image recule et s'estompe plutot que de disparaitre net, pour
       accompagner le repli du bloc plutot que de sauter hors de l'ecran avec lui. */
    transition: transform 420ms cubic-bezier(.65, 0, .35, 1), opacity 420ms ease;
}

.tavern-campaign-hero-wrap.collapsed .tavern-campaign-hero[b-xn7gxz1njc] {
    transform: scale(0.92) translateY(-18px);
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .tavern-campaign-hero-wrap[b-xn7gxz1njc],
    .tavern-campaign-hero[b-xn7gxz1njc] {
        transition: none;
    }
}

.tavern-campaign-hero img[b-xn7gxz1njc] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tavern-campaign-hero-placeholder[b-xn7gxz1njc] {
    font-family: 'Cinzel', serif;
    color: var(--dnd-ink-faint);
}

.tavern-campaign-title[b-xn7gxz1njc] {
    font-size: clamp(24px, 4vw, 34px);
    margin: 0 0 10px;
}

.tavern-campaign-name-input[b-xn7gxz1njc] {
    max-width: 420px;
}

.tavern-campaign-badges[b-xn7gxz1njc] {
    margin-bottom: 24px;
}

/* La rangée d'onglets elle-même (.tavern-campaign-tabs et consorts) vit désormais dans
   CampaignTabNav.razor.css : composant partagé avec Combat/Grimoire/Cartes/Notes MJ, voir
   Components/Campaigns/CampaignTabNav.razor. */
/* /Components/Pages/Campaigns.razor.rz.scp.css */
.tavern-campaigns-header[b-4c64h2wjg0] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 30px;
}

.tavern-campaigns-header h1[b-4c64h2wjg0] {
    font-size: clamp(26px, 4vw, 34px);
    margin: 0;
}

.tavern-new-campaign-form[b-4c64h2wjg0] {
    margin-bottom: 24px;
    padding: 22px 26px;
}

.tavern-campaign-grid[b-4c64h2wjg0] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.tavern-campaign-card[b-4c64h2wjg0] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    text-decoration: none;
    color: inherit;
}

.tavern-campaign-banner[b-4c64h2wjg0] {
    width: 100%;
    height: 140px;
    background: linear-gradient(135deg, #2E2417 0%, #1A1510 60%, var(--dnd-bg-3) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.tavern-campaign-banner img[b-4c64h2wjg0] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tavern-campaign-banner span[b-4c64h2wjg0] {
    font-family: 'Cinzel', serif;
    font-size: 28px;
    color: var(--dnd-border);
}

.tavern-campaign-body[b-4c64h2wjg0] {
    padding: 18px 20px 20px;
}

.tavern-campaign-name[b-4c64h2wjg0] {
    font-family: 'Cinzel', serif;
    font-size: 18px;
    color: var(--dnd-gold-bright);
    margin-bottom: 6px;
}

.tavern-campaign-role[b-4c64h2wjg0] {
    font-size: 13px;
    color: var(--dnd-ink-dim);
    margin-bottom: 10px;
}

.tavern-campaign-pitch[b-4c64h2wjg0] {
    font-size: 14px;
    color: var(--dnd-body-copy);
    line-height: 1.5;
    margin-bottom: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tavern-campaign-footer[b-4c64h2wjg0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px dashed var(--dnd-border);
    padding-top: 12px;
}

.tavern-campaign-arrow[b-4c64h2wjg0] {
    color: var(--dnd-ink-dim);
    font-size: 14px;
}
/* /Components/Pages/CharacterDetail.razor.rz.scp.css */
.tavern-character-identity-form[b-ojek6benb1] {
    max-width: 420px;
}

.tavern-character-header-avatar[b-ojek6benb1] {
    position: relative;
    width: 84px;
    height: 84px;
    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-character-header-avatar img[b-ojek6benb1] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tavern-character-header-avatar span[b-ojek6benb1] {
    font-family: 'Cinzel', serif;
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--dnd-gold-bright);
}

.tavern-character-cards-grid[b-ojek6benb1] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}

.tavern-apercu-grid[b-ojek6benb1] {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 20px;
    align-items: start;
}

@media (max-width: 767.98px) {
    .tavern-apercu-grid[b-ojek6benb1] {
        grid-template-columns: 1fr;
    }
}

.tavern-character-tabs[b-ojek6benb1] {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--dnd-border);
    overflow-x: auto;
}

.tavern-character-tab[b-ojek6benb1] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 12px 16px;
    cursor: pointer;
    white-space: nowrap;
    /* Meme cause que les onglets de campagne (CampaignDetail.razor.css) : la regle generique
       `min-width: 44px` de T-16 ecrase le min-width:auto implicite qui empeche un element flex
       de retrecir sous son contenu. Les libelles, en nowrap et overflow visible, debordaient
       alors sur leurs voisins. Le conteneur defile deja (overflow-x:auto ci-dessus). */
    flex-shrink: 0;
    font-family: 'Cinzel', serif;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dnd-ink-dim);
}

.tavern-character-tab.active[b-ojek6benb1] {
    border-bottom-color: var(--dnd-gold);
    color: var(--dnd-gold-bright);
}

.party-mode-action-bar[b-ojek6benb1] {
    position: sticky;
    bottom: 0;
    background: linear-gradient(180deg, var(--dnd-panel-1) 0%, var(--dnd-panel-2) 100%);
    border-top: 1px solid var(--dnd-border);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.party-mode summary[b-ojek6benb1] {
    cursor: pointer;
    font-weight: 600;
    padding: 0.5rem 0;
}

@media (max-width: 767.98px) {
    [b-ojek6benb1] .btn,
    [b-ojek6benb1] select.form-select,
    [b-ojek6benb1] input[type="checkbox"] {
        min-height: 44px;
    }

    [b-ojek6benb1] input[type="checkbox"] {
        min-width: 44px;
    }
}
/* /Components/Pages/Characters.razor.rz.scp.css */
.tavern-roster-header[b-jl2l8toiu2] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 30px;
}

.tavern-roster-header h1[b-jl2l8toiu2] {
    font-size: clamp(26px, 4vw, 34px);
    margin: 8px 0 0;
}

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

.tavern-roster-card[b-jl2l8toiu2] {
    text-align: left;
    cursor: pointer;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tavern-roster-avatar[b-jl2l8toiu2] {
    width: 52px;
    height: 52px;
    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-roster-avatar img[b-jl2l8toiu2] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tavern-roster-avatar span[b-jl2l8toiu2] {
    font-family: 'Cinzel', serif;
    font-size: 16px;
    color: var(--dnd-ink-faint);
}

.tavern-roster-name[b-jl2l8toiu2] {
    font-family: 'Cinzel', serif;
    font-size: 15px;
    color: var(--dnd-gold-bright);
}

.tavern-roster-meta[b-jl2l8toiu2] {
    font-size: 13px;
    color: var(--dnd-ink-dim);
}

.tavern-roster-no-campaign[b-jl2l8toiu2] {
    font-size: 11px;
    color: var(--dnd-ink-faint);
    font-style: italic;
}
/* /Components/Pages/CombatTracker.razor.rz.scp.css */
/* Secousse d'impact de l'ouverture de combat (CombatStartFlourish) : le contenu de la page encaisse
   le choc des lames pendant 260 ms, au moment où l'éclat apparaît.

   La transformation est portée par ce conteneur et non par le calque d'animation, qui est en
   position: fixed — un ancêtre transformé lui servirait de référence de positionnement et le
   décollerait du centre de l'écran. Le calque est donc rendu hors de ce conteneur. */
.combat-page-content[b-qcevi4sb04] {
    animation: combat-jolt-b-qcevi4sb04 260ms ease-in-out 560ms;
}

@keyframes combat-jolt-b-qcevi4sb04 {
    0%, 100% { transform: translate(0, 0); }
    22% { transform: translate(-5px, 3px); }
    48% { transform: translate(4px, -2px); }
    74% { transform: translate(-2px, 1px); }
}

@media (prefers-reduced-motion: reduce) {
    .combat-page-content[b-qcevi4sb04] {
        animation: none;
    }
}

/* Liste de creatures du panneau « + Monstre ». Elle reprend les cartes du selecteur du referentiel
   (.tavern-monster-grid), mais depliee dans la page et non dans une modale : sa hauteur est bornee
   plus bas, sinon un bestiaire de cinquante creatures repousserait l'ordre de tour — ce que le MJ
   regarde — hors de l'ecran. */
.tavern-combat-monster-list[b-qcevi4sb04] {
    max-height: 260px;
}

/* La carte choisie doit se distinguer de la carte survolee, qui prend deja la bordure doree. */
.tavern-monster-card.is-selected[b-qcevi4sb04] {
    border-color: var(--dnd-gold);
    background: rgba(201, 162, 39, 0.12);
}
/* /Components/Pages/GmNotesPage.razor.rz.scp.css */
/* ------------------------------------------------------------------ cadre */

/* Le carnet est un cadre unique — une seule bordure, des filets de 1px entre les regions — et non
   quatre cartes flottantes separees par des gouttieres. C'est ce qui distingue un wiki d'un
   tableau de bord : les regions se touchent, et l'oeil suit une ligne continue du sommaire au
   document.

   Sa hauteur est celle de la fenetre moins la navigation (bandeau principal + CampaignTabNav,
   sticky au-dessus du cadre) et les marges de .tavern-main-full (MainLayout.razor.css) : le
   defilement passe a l'interieur du document, si bien que la barre superieure, l'arborescence et
   la barre d'outils restent a l'ecran sans aucun position: sticky. */
.gm-frame[b-gslmip283r] {
    --gm-frame-gap: clamp(10px, 1.5vw, 20px);

    display: flex;
    flex-direction: column;
    height: calc(100dvh - var(--dnd-topnav-height) - var(--dnd-campaign-nav-height) - 2 * var(--gm-frame-gap));
    min-height: 480px;
    overflow: hidden;
    background: var(--dnd-bg-2);
    border: 1px solid var(--dnd-border);
    border-radius: 12px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
}

/* ------------------------------------------------------------------ theme clair du carnet */

/* Le reste du site garde son theme sombre — bandeau de navigation compris, a dessein — et seul le
   carnet passe dans une palette claire de papier/parchemin. La technique : re-declarer localement
   les variables --dnd-* que (quasi) chaque regle de ce fichier consomme deja, plutot que dupliquer
   une seconde feuille de styles. GmMovePageDialog n'est pas niche sous .gm-frame (voir plus bas,
   position: fixed hors du cadre) : il recoit la meme palette separement.
   Les teintes "-text" (green/red/blue) sont assombries specifiquement — concues pour porter du texte
   clair sur fond sombre, elles seraient illisibles telles quelles sur un fond clair. */
.gm-frame[b-gslmip283r],
[b-gslmip283r] .gm-move-dialog {
    --dnd-bg-2: #F3EFE0;
    --dnd-panel-1: #ECE6D2;
    --dnd-panel-2: #FFFEF8;
    --dnd-border: #D9D0B4;
    --dnd-border-strong: #B9A87C;
    --dnd-ink: #2A2416;
    --dnd-ink-dim: #5B5138;
    --dnd-ink-faint: #756B4E;
    --dnd-label-gold: #8A6A1F;
    --dnd-gold-bright: #A6690E;
    --dnd-body-copy: #3A331F;
    --dnd-green-text: #2E6B45;
    --dnd-red-text: #9B3232;
    --dnd-blue-text: #2F5872;

    /* color-scheme et scrollbar-color s'heritent par valeur deja resolue, pas par reference : sans
       les redeclarer ici, ascenseurs et controles natifs (cases a cocher...) garderaient le rendu
       sombre calcule au niveau de :root (dnd-theme.css), meme apres le changement de variables. */
    color-scheme: light;
    scrollbar-color: var(--dnd-border) transparent;
}

/* Champs et surfaces "en creux" : rgba(0,0,0,X) suppose un fond deja sombre. Reprise telle quelle
   sur la palette claire ci-dessus, la meme technique donnerait un gris terne difficile a lire — une
   teinte beaucoup plus legere recree le meme effet de retrait sans assombrir le texte pose dessus. */
.gm-search-input[b-gslmip283r],
.gm-search-hit[b-gslmip283r],
.gm-import-report[b-gslmip283r],
.gm-sidebar[b-gslmip283r]  .gm-tree-rename-input,
.gm-page-icon-wrap[b-gslmip283r]  .gm-emoji-picker-filter,
[b-gslmip283r] .gm-move-search {
    background: rgba(0, 0, 0, 0.045);
}

.gm-read[b-gslmip283r]  code,
.gm-read[b-gslmip283r]  pre {
    background: rgba(0, 0, 0, 0.06);
}

.gm-read[b-gslmip283r]  .gm-note-childpage,
.gm-read[b-gslmip283r]  .gm-note-file,
.gm-read[b-gslmip283r]  .gm-note-bookmark {
    background: rgba(0, 0, 0, 0.035);
}

/* Carte "papier" du corps de page, comme l'article du wiki de reference : le texte se detache du
   fond du carnet plutot que de s'y fondre. Pas en mode edition avec apercu cote a cote (full-width),
   ou les deux colonnes ont deja besoin de toute la largeur disponible. */
.gm-main-content:not(.full-width)[b-gslmip283r] {
    padding: 30px 34px 40px;
    background: var(--dnd-panel-2);
    border: 1px solid var(--dnd-border);
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(43, 36, 20, 0.08);
}

/* ------------------------------------------------------------------ barre superieure */

/* Une seule barre (S09-T04) : elle absorbe le fil d'Ariane qui vivait dans le contenu et la barre
   de statut qui s'intercalait entre le titre et le corps. */
.gm-topbar[b-gslmip283r] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 12px;
    background: var(--dnd-panel-2);
    border-bottom: 1px solid var(--dnd-border);
}

.gm-topbar-crumbs[b-gslmip283r] {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
}

.gm-crumb[b-gslmip283r] {
    flex-shrink: 0;
    max-width: 22ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: transparent;
    border: none;
    border-radius: 4px;
    padding: 2px 4px;
    color: var(--dnd-ink-faint);
    font-size: 12.5px;
    cursor: pointer;
}

.gm-crumb:hover[b-gslmip283r] {
    color: var(--dnd-gold-bright);
    text-decoration: underline;
}

/* La page ouverte n'est pas un lien : on y est déjà. */
.gm-crumb.current[b-gslmip283r] {
    color: var(--dnd-ink-dim);
    cursor: default;
}

.gm-crumb-sep[b-gslmip283r] {
    flex-shrink: 0;
    color: var(--dnd-ink-faint);
    font-size: 12px;
}

.gm-topbar-actions[b-gslmip283r] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.gm-topbar-btn[b-gslmip283r] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid var(--dnd-border);
    border-radius: 6px;
    color: var(--dnd-ink-dim);
    font-size: 12.5px;
    padding: 5px 12px;
    cursor: pointer;
    white-space: nowrap;
}

.gm-topbar-btn:hover[b-gslmip283r] {
    border-color: var(--dnd-gold);
    color: var(--dnd-ink);
}

.gm-topbar-btn.primary[b-gslmip283r] {
    border-color: var(--dnd-gold);
    background: rgba(201, 162, 39, 0.14);
    color: var(--dnd-gold-bright);
}

.gm-topbar-btn.primary:hover[b-gslmip283r] {
    background: rgba(201, 162, 39, 0.22);
}

.gm-page-menu-wrap[b-gslmip283r] {
    position: relative;
}

.gm-page-menu-backdrop[b-gslmip283r] {
    position: fixed;
    inset: 0;
    z-index: 40;
}

.gm-page-menu[b-gslmip283r] {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 41;
    display: flex;
    flex-direction: column;
    min-width: 220px;
    background: var(--dnd-panel-1);
    border: 1px solid var(--dnd-border-strong);
    border-radius: 8px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
    padding: 4px;
}

.gm-page-menu button[b-gslmip283r],
.gm-page-menu a[b-gslmip283r] {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--dnd-ink-dim);
    font-size: 12.5px;
    padding: 6px 8px;
    cursor: pointer;
    text-decoration: none;
}

.gm-page-menu button:hover[b-gslmip283r],
.gm-page-menu a:hover[b-gslmip283r] {
    background: rgba(201, 162, 39, 0.12);
    color: var(--dnd-ink);
}

.gm-page-menu button.danger[b-gslmip283r] {
    color: var(--dnd-red-text);
}

.gm-page-menu button.danger:hover[b-gslmip283r] {
    background: rgba(160, 40, 40, 0.14);
}

.gm-page-menu-sep[b-gslmip283r] {
    height: 1px;
    background: var(--dnd-border);
    margin: 4px 2px;
}

.gm-page-menu-meta[b-gslmip283r] {
    margin-top: 4px;
    padding: 6px 8px 2px;
    border-top: 1px solid var(--dnd-border);
    color: var(--dnd-ink-faint);
    font-size: 11px;
    line-height: 1.5;
}

/* ------------------------------------------------------------------ grille */

/* ------------------------------------------------------------------ bande de mise en forme */

/* Pleine largeur, sous la barre supérieure : la barre d'outils surplombe l'arborescence comme le
   document, à la manière d'un traitement de texte. Elle est rendue par l'éditeur (SectionContent)
   mais placée ici — voir GmNoteMarkdownEditor.ToolbarSectionName. */
.gm-toolbar-band[b-gslmip283r] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 3px 10px;
    background: var(--dnd-panel-1);
    border-bottom: 1px solid var(--dnd-border);
}

/* ------------------------------------------------------------------ corps */

.gm-body[b-gslmip283r] {
    flex: 1;
    display: flex;
    min-height: 0;
    position: relative;
}

.gm-hamburger[b-gslmip283r] {
    display: none;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    font-size: 14px;
    color: var(--dnd-ink-dim);
    background: transparent;
    border: 1px solid var(--dnd-border);
    border-radius: 6px;
    cursor: pointer;
}

.gm-sidebar-backdrop[b-gslmip283r] {
    display: none;
    padding: 0;
    border: none;
}

/* ------------------------------------------------------------------ arborescence */

.gm-sidebar[b-gslmip283r] {
    flex-shrink: 0;
    width: 270px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 8px 16px 12px;
    background: var(--dnd-panel-1);
    border-right: 1px solid var(--dnd-border);
    overflow-y: auto;
}

/* Carte d'espace : de quel carnet il s'agit, et ce qu'il pèse. */
.gm-space[b-gslmip283r] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 4px 10px;
    border-bottom: 1px solid var(--dnd-border);
}

.gm-space-badge[b-gslmip283r] {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(201, 162, 39, 0.14);
    border: 1px solid var(--dnd-border-strong);
    border-radius: 6px;
    font-size: 13px;
}

.gm-space-text[b-gslmip283r] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.gm-space-name[b-gslmip283r] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--dnd-ink);
    font-family: 'Cinzel', serif;
    font-size: 12.5px;
    line-height: 1.3;
}

.gm-space-sub[b-gslmip283r] {
    color: var(--dnd-ink-faint);
    font-size: 10px;
}

/* Favoris : raccourci fixe vers les pages épinglées, en plus de l'arborescence qu'il ne
   remplace pas — même style de ligne que .gm-tree-row (voir plus bas), mais à plat. */
.gm-favorites-header[b-gslmip283r] {
    margin-top: 2px;
}

.gm-favorites-list[b-gslmip283r] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.gm-favorite-row[b-gslmip283r] {
    display: flex;
    align-items: center;
    gap: 2px;
    border-radius: 6px;
    padding: 1px 2px;
}

.gm-favorite-row:hover[b-gslmip283r] {
    background: rgba(201, 162, 39, 0.08);
}

.gm-favorite-row.selected[b-gslmip283r] {
    background: rgba(201, 162, 39, 0.16);
}

.gm-favorite-link[b-gslmip283r] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    text-align: left;
    background: transparent;
    border: none;
    border-radius: 6px;
    padding: 5px 4px;
    color: var(--dnd-ink-dim);
    font-size: 13px;
    cursor: pointer;
}

.gm-favorite-row.selected .gm-favorite-link[b-gslmip283r] {
    color: var(--dnd-ink);
}

.gm-favorite-icon[b-gslmip283r] {
    flex-shrink: 0;
    font-size: 12px;
}

.gm-favorite-title[b-gslmip283r] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gm-favorite-unstar[b-gslmip283r] {
    flex-shrink: 0;
    opacity: 0;
    background: transparent;
    border: none;
    color: var(--dnd-gold);
    font-size: 13px;
    cursor: pointer;
    padding: 0 4px;
}

.gm-favorite-row:hover .gm-favorite-unstar[b-gslmip283r],
.gm-favorite-row:focus-within .gm-favorite-unstar[b-gslmip283r] {
    opacity: 1;
}

@media (hover: none) {
    .gm-favorite-unstar[b-gslmip283r] {
        opacity: 1;
    }
}

.gm-search-input[b-gslmip283r] {
    width: 100%;
    margin: 0 0 2px;
    padding: 7px 10px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--dnd-border);
    border-radius: 8px;
    color: var(--dnd-ink);
    font-size: 13px;
}

.gm-search-input:focus[b-gslmip283r] {
    outline: none;
    border-color: var(--dnd-gold);
}

.gm-search-results[b-gslmip283r] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gm-search-empty[b-gslmip283r],
.gm-tree-empty[b-gslmip283r] {
    color: var(--dnd-ink-faint);
    font-size: 13px;
    font-style: italic;
}

.gm-search-hit[b-gslmip283r] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--dnd-border);
    border-radius: 8px;
    padding: 8px 10px;
    cursor: pointer;
}

.gm-search-hit:hover[b-gslmip283r] {
    border-color: var(--dnd-gold);
}

.gm-search-hit-title[b-gslmip283r] {
    color: var(--dnd-ink);
    font-size: 13px;
}

.gm-search-hit-path[b-gslmip283r] {
    color: var(--dnd-ink-faint);
    font-size: 11px;
}

.gm-search-hit-snippet[b-gslmip283r] {
    color: var(--dnd-ink-dim);
    font-size: 12px;
    line-height: 1.4;
}

.gm-search-hit-snippet mark[b-gslmip283r] {
    background: rgba(201, 162, 39, 0.35);
    color: var(--dnd-ink);
    border-radius: 2px;
    padding: 0 1px;
}

/* En-tête de section repliable (comme Notion) : remplace les 5 boutons pointillés empilés
   (Nouvelle page, import Notion, restaurer, exporter JSON/Markdown, corbeille) par un "+" et un
   "⋯" au fil du libellé de section. */
.gm-sidebar-section-header[b-gslmip283r] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.gm-sidebar-section-actions[b-gslmip283r] {
    display: flex;
    gap: 2px;
}

.gm-sidebar-section-btn[b-gslmip283r] {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--dnd-ink-faint);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.gm-sidebar-section-btn:hover[b-gslmip283r] {
    background: rgba(201, 162, 39, 0.12);
    color: var(--dnd-gold-bright);
}

/* La sidebar défile (overflow-y: auto), ce qui rogne le menu de section, positionné en absolu à
   l'intérieur. Invisible tant que l'arborescence est longue — la boîte est alors plus haute que le
   menu — mais bloquant à l'ouverture d'un gros carnet, où l'arbre replié ne fait qu'une ligne :
   mesuré à 161px de haut pour un menu de 215px, soit les trois dernières entrées inatteignables.
   Le défilement est suspendu le temps que le menu est ouvert ; il ne l'est jamais plus de quelques
   secondes, et aucune alternative purement CSS ne permet d'échapper au conteneur (position: fixed
   se comporte en absolu sous le tiroir mobile, qui porte un transform). */
.gm-sidebar:has(.gm-sidebar-section-menu)[b-gslmip283r] {
    overflow: visible;
}

.gm-sidebar-section-menu-backdrop[b-gslmip283r] {
    position: fixed;
    inset: 0;
    z-index: 40;
}

.gm-sidebar-section-menu[b-gslmip283r] {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 41;
    display: flex;
    flex-direction: column;
    min-width: 220px;
    background: var(--dnd-panel-1);
    border: 1px solid var(--dnd-border-strong);
    border-radius: 8px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
    padding: 4px;
}

.gm-sidebar-section-menu-item[b-gslmip283r] {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--dnd-ink-dim);
    font-size: 12px;
    padding: 6px 8px;
    cursor: pointer;
    text-decoration: none;
}

.gm-sidebar-section-menu-item:hover[b-gslmip283r] {
    background: rgba(201, 162, 39, 0.12);
    color: var(--dnd-ink);
}

.gm-import-progress[b-gslmip283r] {
    margin-top: 8px;
    color: var(--dnd-ink-faint);
    font-size: 12px;
    font-style: italic;
    line-height: 1.4;
}

/* Echec d'un import, affiche dans la sidebar : c'est la que l'import se declenche, et le panneau
   de la page n'est rendu qu'une page ouverte. */
.gm-import-error[b-gslmip283r] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px;
    padding: 8px 10px;
    background: rgba(160, 40, 40, 0.14);
    border: 1px solid var(--dnd-red);
    border-radius: 8px;
    color: var(--dnd-red-text);
    font-size: 12px;
    line-height: 1.45;
}

.gm-import-error button[b-gslmip283r] {
    flex-shrink: 0;
    margin-left: auto;
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 6px;
    color: inherit;
    font-size: 11px;
    padding: 2px 8px;
    cursor: pointer;
}

.gm-import-report[b-gslmip283r] {
    margin-top: 10px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--dnd-border);
    border-radius: 8px;
    padding: 10px;
    color: var(--dnd-ink-dim);
    font-size: 12px;
}

.gm-import-report-title[b-gslmip283r] {
    color: var(--dnd-label-gold);
    font-family: 'Cinzel', serif;
    margin-bottom: 6px;
}

.gm-import-report ul[b-gslmip283r] {
    margin: 0 0 6px;
    padding-left: 16px;
}

.gm-import-report summary[b-gslmip283r] {
    cursor: pointer;
    color: var(--dnd-ink-faint);
}

.gm-import-report details ul[b-gslmip283r] {
    max-height: 180px;
    overflow-y: auto;
    color: var(--dnd-ink-faint);
}

/* Chemin de page cliquable dans le rapport de conversion (S09) : le rapport doit mener à la page
   à relire, pas seulement la nommer. */
.gm-import-report .gm-conversion-warning-link[b-gslmip283r] {
    background: transparent;
    border: none;
    padding: 0;
    color: var(--dnd-gold-bright);
    font-size: 12px;
    text-align: left;
    text-decoration: underline;
    cursor: pointer;
}

.gm-import-report button[b-gslmip283r] {
    background: transparent;
    border: 1px solid var(--dnd-border);
    border-radius: 6px;
    color: var(--dnd-ink-dim);
    font-size: 11px;
    padding: 2px 8px;
    cursor: pointer;
}

.gm-trash-list[b-gslmip283r] {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gm-trash-list li[b-gslmip283r] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--dnd-ink-dim);
}

.gm-trash-title[b-gslmip283r] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gm-trash-list button[b-gslmip283r] {
    background: transparent;
    border: 1px solid var(--dnd-border);
    border-radius: 6px;
    color: var(--dnd-ink-dim);
    font-size: 11px;
    padding: 2px 6px;
    cursor: pointer;
}

.gm-trash-list button.danger[b-gslmip283r] {
    color: var(--dnd-red-text);
    border-color: var(--dnd-red);
}

/* L'arborescence est rendue par GmNotesTree : ::deep est requis, l'isolation CSS de Blazor ne
   propage pas le scope aux composants enfants. */
.gm-sidebar[b-gslmip283r]  .gm-tree {
    list-style: none;
    margin: 0;
    padding: 0;
}

.gm-sidebar[b-gslmip283r]  .gm-tree-nested {
    padding-left: 16px;
}

.gm-sidebar[b-gslmip283r]  .gm-tree-node {
    position: relative;
    margin: 1px 0;
}

.gm-sidebar[b-gslmip283r]  .gm-tree-row {
    display: flex;
    align-items: center;
    gap: 2px;
    border-radius: 6px;
    padding: 1px 2px;
}

.gm-sidebar[b-gslmip283r]  .gm-tree-row:hover {
    background: rgba(201, 162, 39, 0.08);
}

.gm-sidebar[b-gslmip283r]  .gm-tree-row.selected {
    background: rgba(201, 162, 39, 0.16);
}

.gm-sidebar[b-gslmip283r]  .gm-tree-row.drop-target {
    outline: 1px dashed var(--dnd-gold);
}

/* Ligne d'insertion entre deux pages : distincte du dépôt sur une page (drop-target ci-dessus, qui
   rend la page déposée enfant). Hauteur non nulle en permanence pour rester une cible de dépôt
   valide, le trait ne se révèle qu'au survol pendant un glisser. */
.gm-sidebar[b-gslmip283r]  .gm-tree-dropline {
    height: 6px;
    list-style: none;
    position: relative;
}

.gm-sidebar[b-gslmip283r]  .gm-tree-dropline.active::after {
    content: '';
    position: absolute;
    left: 4px;
    right: 4px;
    top: 50%;
    height: 2px;
    background: var(--dnd-gold);
    border-radius: 2px;
    transform: translateY(-50%);
}

/* Pas de colonne dédiée au chevron (comme Notion) : icône et bascule occupent la même case,
   superposées, et se permutent au survol pour les pages qui ont des enfants. */
.gm-sidebar[b-gslmip283r]  .gm-tree-icon-slot {
    position: relative;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.gm-sidebar[b-gslmip283r]  .gm-tree-icon {
    font-size: 12px;
}

.gm-sidebar[b-gslmip283r]  .gm-tree-icon-slot.has-toggle .gm-tree-toggle {
    position: absolute;
    inset: 0;
    opacity: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--dnd-ink-faint);
    cursor: pointer;
    padding: 0;
}

.gm-sidebar[b-gslmip283r]  .gm-tree-toggle svg {
    transition: transform 150ms ease;
}

.gm-sidebar[b-gslmip283r]  .gm-tree-toggle.expanded svg {
    transform: rotate(90deg);
}

.gm-sidebar[b-gslmip283r]  .gm-tree-row:hover .gm-tree-icon-slot.has-toggle .gm-tree-toggle,
.gm-sidebar[b-gslmip283r]  .gm-tree-row:focus-within .gm-tree-icon-slot.has-toggle .gm-tree-toggle {
    opacity: 1;
}

.gm-sidebar[b-gslmip283r]  .gm-tree-row:hover .gm-tree-icon-slot.has-toggle .gm-tree-icon,
.gm-sidebar[b-gslmip283r]  .gm-tree-row:focus-within .gm-tree-icon-slot.has-toggle .gm-tree-icon {
    opacity: 0;
}

.gm-sidebar[b-gslmip283r]  .gm-tree-link {
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0;
    text-align: left;
    background: transparent;
    border: none;
    border-radius: 6px;
    padding: 5px 4px;
    color: var(--dnd-ink-dim);
    font-size: 13px;
    cursor: pointer;
}

.gm-sidebar[b-gslmip283r]  .gm-tree-row.selected .gm-tree-link {
    color: var(--dnd-ink);
}

.gm-sidebar[b-gslmip283r]  .gm-tree-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gm-sidebar[b-gslmip283r]  .gm-tree-rename-input {
    flex: 1;
    min-width: 0;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--dnd-gold);
    border-radius: 6px;
    color: var(--dnd-ink);
    font-size: 13px;
    padding: 4px 6px;
}

.gm-sidebar[b-gslmip283r]  .gm-tree-rename-input:focus {
    outline: none;
}

.gm-sidebar[b-gslmip283r]  .gm-tree-favorite-btn,
.gm-sidebar[b-gslmip283r]  .gm-tree-add-btn,
.gm-sidebar[b-gslmip283r]  .gm-tree-actions-btn {
    flex-shrink: 0;
    opacity: 0;
    background: transparent;
    border: none;
    color: var(--dnd-ink-faint);
    cursor: pointer;
    padding: 0 4px;
}

.gm-sidebar[b-gslmip283r]  .gm-tree-favorite-btn.active {
    opacity: 1;
    color: var(--dnd-gold);
}

.gm-sidebar[b-gslmip283r]  .gm-tree-row:hover .gm-tree-favorite-btn,
.gm-sidebar[b-gslmip283r]  .gm-tree-row:focus-within .gm-tree-favorite-btn,
.gm-sidebar[b-gslmip283r]  .gm-tree-row:hover .gm-tree-add-btn,
.gm-sidebar[b-gslmip283r]  .gm-tree-row:focus-within .gm-tree-add-btn,
.gm-sidebar[b-gslmip283r]  .gm-tree-row:hover .gm-tree-actions-btn,
.gm-sidebar[b-gslmip283r]  .gm-tree-row:focus-within .gm-tree-actions-btn,
.gm-sidebar[b-gslmip283r]  .gm-tree-actions-btn[aria-expanded="true"] {
    opacity: 1;
}

/* Sans survol — tactile — rien de ce qui précède ne se révélerait jamais : créer une sous-page,
   basculer un noeud, dupliquer et mettre à la corbeille deviendraient inatteignables. Or c'est
   précisément sous 900px que l'arborescence passe en tiroir, donc sur mobile. */
@media (hover: none) {
    .gm-sidebar[b-gslmip283r]  .gm-tree-favorite-btn,
    .gm-sidebar[b-gslmip283r]  .gm-tree-add-btn,
    .gm-sidebar[b-gslmip283r]  .gm-tree-actions-btn,
    .gm-sidebar[b-gslmip283r]  .gm-tree-icon-slot.has-toggle .gm-tree-toggle {
        opacity: 1;
    }

    .gm-sidebar[b-gslmip283r]  .gm-tree-icon-slot.has-toggle .gm-tree-icon {
        opacity: 0;
    }
}

.gm-sidebar[b-gslmip283r]  .gm-tree-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
}

.gm-sidebar[b-gslmip283r]  .gm-tree-menu {
    position: absolute;
    right: 0;
    z-index: 41;
    display: flex;
    flex-direction: column;
    min-width: 220px;
    background: var(--dnd-panel-1);
    border: 1px solid var(--dnd-border-strong);
    border-radius: 8px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
    padding: 4px;
}

.gm-sidebar[b-gslmip283r]  .gm-tree-menu button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-align: left;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--dnd-ink-dim);
    font-size: 12px;
    padding: 6px 8px;
    cursor: pointer;
}

.gm-sidebar[b-gslmip283r]  .gm-tree-menu button:hover {
    background: rgba(201, 162, 39, 0.12);
    color: var(--dnd-ink);
}

.gm-sidebar[b-gslmip283r]  .gm-tree-menu button.danger {
    color: var(--dnd-red-text);
}

.gm-sidebar[b-gslmip283r]  .gm-tree-menu-shortcut {
    flex-shrink: 0;
    color: var(--dnd-ink-faint);
    font-size: 10px;
    letter-spacing: 0.03em;
}

.gm-sidebar[b-gslmip283r]  .gm-tree-menu-footer {
    margin-top: 4px;
    padding: 6px 8px 2px;
    border-top: 1px solid var(--dnd-border);
    color: var(--dnd-ink-faint);
    font-size: 11px;
}

/* ------------------------------------------------------------------ zone d'édition */

/* La colonne qui défile. C'est la seule du cadre à le faire : tout le reste — barre supérieure,
   outils, arborescence, sommaire — tient en place. */
.gm-main[b-gslmip283r] {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    padding: 26px 30px 60px;
}

/* Colonne de lecture plafonnée, centrée dans .gm-main : un paragraphe qui court sur toute la
   largeur d'un grand écran devient difficile à suivre d'une ligne à l'autre. Le panneau lui-même
   (fond, bordure) reste pleine largeur, seul le texte est resserré, comme chez Notion. */
/* Largeur de lecture : la page occupe l'ecran, le texte non — au-dela d'environ 90 caracteres,
   l'oeil perd sa ligne en revenant a la marge. */
.gm-main-content[b-gslmip283r] {
    max-width: 820px;
    margin: 0 auto;
}

/* Sauf en edition avec apercu : les deux colonnes ont alors besoin de toute la place disponible. */
.gm-main-content.full-width[b-gslmip283r] {
    max-width: none;
}

.gm-page-header[b-gslmip283r] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

/* Ligne de signature, et le filet qui sépare l'en-tête du corps. Les étiquettes viendront s'y
   poser en S09-T10. */
.gm-page-byline[b-gslmip283r] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 0 8px 14px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--dnd-border);
    color: var(--dnd-ink-faint);
    font-size: 11.5px;
}

.gm-page-icon-wrap[b-gslmip283r] {
    position: relative;
}

.gm-page-icon[b-gslmip283r] {
    width: 46px;
    text-align: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--dnd-ink);
    font-size: 24px;
    padding: 4px;
    cursor: pointer;
}

/* Sans icône posée : rien au repos, l'invite ne se révèle qu'au survol de l'en-tête (comme
   Notion), plutôt que de rester affichée en permanence comme l'ancien champ <input>. Une icône
   déjà posée reste visible en permanence — elle n'est plus une action, .gm-page-icon ci-dessus
   suffit. */
.gm-page-icon.placeholder[b-gslmip283r] {
    width: auto;
    white-space: nowrap;
    border: 1px dashed var(--dnd-border);
    color: var(--dnd-ink-faint);
    font-size: 12px;
    padding: 4px 10px;
    opacity: 0;
}

.gm-page-header:hover .gm-page-icon.placeholder[b-gslmip283r],
.gm-page-header:focus-within .gm-page-icon.placeholder[b-gslmip283r] {
    opacity: 1;
}

/* Sans survol — tactile — l'invite ne se révèlerait jamais : poser une icône deviendrait
   inatteignable. Même raison que pour l'arborescence et les blocs de l'éditeur. */
@media (hover: none) {
    .gm-page-icon.placeholder[b-gslmip283r] {
        opacity: 1;
    }
}

.gm-page-title[b-gslmip283r] {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--dnd-ink);
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 30px;
    line-height: 1.15;
    padding: 4px 8px;
}

.gm-page-icon:hover[b-gslmip283r],
.gm-page-title:hover[b-gslmip283r] {
    border-color: var(--dnd-border);
}

.gm-page-icon:focus[b-gslmip283r],
.gm-page-title:focus[b-gslmip283r] {
    outline: none;
    border-color: var(--dnd-gold);
}

/* ------------------------------------------------------------------ selecteur d'icone */

.gm-page-icon-wrap[b-gslmip283r]  .gm-emoji-picker-backdrop {
    position: fixed;
    inset: 0;
    z-index: 60;
}

.gm-page-icon-wrap[b-gslmip283r]  .gm-emoji-picker {
    position: absolute;
    left: 0;
    top: calc(100% + 6px);
    z-index: 61;
    display: flex;
    flex-direction: column;
    width: min(320px, 88vw);
    max-height: 60dvh;
    background: var(--dnd-panel-1);
    border: 1px solid var(--dnd-border-strong);
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
    padding: 10px;
}

.gm-page-icon-wrap[b-gslmip283r]  .gm-emoji-picker-filter {
    width: 100%;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--dnd-border);
    border-radius: 8px;
    color: var(--dnd-ink);
    font-size: 13px;
    padding: 7px 10px;
    margin-bottom: 6px;
}

.gm-page-icon-wrap[b-gslmip283r]  .gm-emoji-picker-filter:focus {
    outline: none;
    border-color: var(--dnd-gold);
}

.gm-page-icon-wrap[b-gslmip283r]  .gm-emoji-picker-clear {
    background: transparent;
    border: 1px solid var(--dnd-border);
    border-radius: 8px;
    color: var(--dnd-ink-faint);
    font-size: 12px;
    padding: 5px 8px;
    margin-bottom: 8px;
    cursor: pointer;
}

.gm-page-icon-wrap[b-gslmip283r]  .gm-emoji-picker-clear:hover {
    border-color: var(--dnd-red);
    color: var(--dnd-red-text);
}

.gm-page-icon-wrap[b-gslmip283r]  .gm-emoji-picker-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    overflow-y: auto;
}

.gm-page-icon-wrap[b-gslmip283r]  .gm-emoji-picker-group {
    flex-basis: 100%;
    color: var(--dnd-ink-faint);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 8px 2px 4px;
}

.gm-page-icon-wrap[b-gslmip283r]  .gm-emoji-picker-group:first-child {
    margin-top: 2px;
}

.gm-page-icon-wrap[b-gslmip283r]  .gm-emoji-picker-item {
    width: 34px;
    height: 34px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.gm-page-icon-wrap[b-gslmip283r]  .gm-emoji-picker-item:hover {
    border-color: var(--dnd-gold);
    background: rgba(201, 162, 39, 0.12);
}

.gm-page-icon-wrap[b-gslmip283r]  .gm-emoji-picker-empty {
    color: var(--dnd-ink-faint);
    font-size: 13px;
    font-style: italic;
    padding: 6px 2px;
}

/* Barre d'édition : ne subsiste que l'envoi de fichier, et seulement en mode édition. L'ancienne
   barre de statut (état d'enregistrement, envoi, bouton ⓘ) est démembrée — l'état est monté dans la
   barre supérieure, le ⓘ est devenu le menu « ⋯ ». */
.gm-edit-bar[b-gslmip283r] {
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--dnd-border);
    padding-bottom: 10px;
    margin-bottom: 16px;
}

.gm-save-state[b-gslmip283r] {
    font-size: 11.5px;
    white-space: nowrap;
}

.gm-save-state.saved[b-gslmip283r] {
    color: var(--dnd-green-text);
}

.gm-save-state.dirty[b-gslmip283r],
.gm-save-state.saving[b-gslmip283r] {
    color: var(--dnd-ink-faint);
}

.gm-save-state.failed[b-gslmip283r] {
    color: var(--dnd-red-text);
}

.gm-upload[b-gslmip283r] {
    padding: 5px 12px;
    background: transparent;
    border: 1px solid var(--dnd-border);
    border-radius: 999px;
    color: var(--dnd-ink-dim);
    font-size: 12px;
    cursor: pointer;
}

.gm-upload:hover[b-gslmip283r] {
    border-color: var(--dnd-gold);
    color: var(--dnd-ink);
}

/* Même pilule que .gm-upload, à côté duquel il vit dans la barre : les deux boutons de fin de
   barre doivent se lire comme une paire, pas comme deux styles différents. */
.gm-ref-insert[b-gslmip283r] {
    padding: 5px 12px;
    background: transparent;
    border: 1px solid var(--dnd-border);
    border-radius: 999px;
    color: var(--dnd-ink-dim);
    font-size: 12px;
    cursor: pointer;
}

.gm-ref-insert:hover[b-gslmip283r] {
    border-color: var(--dnd-gold);
    color: var(--dnd-ink);
}

.gm-conflict[b-gslmip283r],
.gm-save-error[b-gslmip283r] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 14px;
    font-size: 13px;
}

.gm-conflict[b-gslmip283r] {
    background: rgba(201, 162, 39, 0.12);
    border: 1px solid var(--dnd-gold);
    color: var(--dnd-ink);
}

.gm-save-error[b-gslmip283r] {
    background: rgba(160, 40, 40, 0.14);
    border: 1px solid var(--dnd-red);
    color: var(--dnd-red-text);
}

.gm-conflict button[b-gslmip283r],
.gm-save-error button[b-gslmip283r] {
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 6px;
    color: inherit;
    font-size: 12px;
    padding: 3px 10px;
    cursor: pointer;
}

/* Brouillon retrouvé au retour sur une page : même gabarit que le bandeau de conflit, ton plus
   neutre. Ce n'est pas un incident, c'est une offre — le MJ reprend ou oublie. */
.gm-draft-banner[b-gslmip283r] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 14px;
    font-size: 13px;
    background: var(--dnd-panel-2);
    border: 1px solid var(--dnd-border-strong);
    color: var(--dnd-ink-dim);
}

.gm-draft-actions[b-gslmip283r] {
    display: flex;
    gap: 8px;
}

.gm-draft-banner button[b-gslmip283r] {
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 6px;
    color: inherit;
    font-size: 12px;
    padding: 3px 10px;
    cursor: pointer;
}

.gm-draft-banner .gm-draft-resume[b-gslmip283r] {
    color: var(--dnd-gold-bright);
}



/* ------------------------------------------------------------------ édition markdown (S09-T05) */

.gm-edit-split[b-gslmip283r] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;
}

/* Aperçu ouvert : deux colonnes égales. Le rendu n'est pas un luxe ici — un tableau markdown tapé à
   la main est illisible tant qu'on ne l'a pas vu rendu, et c'est le format que l'import contient le
   plus. */
.gm-edit-split.with-preview[b-gslmip283r] {
    grid-template-columns: 1fr 1fr;
}

.gm-md-preview[b-gslmip283r] {
    position: sticky;
    top: 0;
    max-height: 100%;
    overflow-y: auto;
    border-left: 1px solid var(--dnd-border);
    padding-left: 24px;
}

/* Pied de publication : l'état d'enregistrement à gauche, la sortie à droite. Pleine largeur au bas
   du cadre — sur une page de trois écrans, « Publier » ne doit pas être à retrouver par le
   défilement. */
.gm-edit-footer[b-gslmip283r] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    padding: 6px 14px;
    background: var(--dnd-panel-2);
    border-top: 1px solid var(--dnd-border);
}

.gm-edit-footer-actions[b-gslmip283r] {
    display: flex;
    align-items: center;
    gap: 8px;
}

@media (max-width: 900px) {
    /* Deux colonnes de 45 caractères ne servent personne : sous cette largeur, l'aperçu passe
       dessous plutôt que de rétrécir le champ de saisie. */
    .gm-edit-split.with-preview[b-gslmip283r] {
        grid-template-columns: 1fr;
    }

    .gm-md-preview[b-gslmip283r] {
        position: static;
        max-height: none;
        border-left: 0;
        border-top: 1px solid var(--dnd-border);
        padding-left: 0;
        padding-top: 16px;
    }
}

/* ------------------------------------------------------------------ lecture (S09-T04) */

/* Le HTML de lecture vient du serveur (MarkupString) : il n'est pas porté par des composants
   Blazor, mais il n'est pas non plus scopé par l'isolation CSS — d'où ::deep sur chaque balise. */
.gm-read[b-gslmip283r] {
    display: block;
    color: var(--dnd-body-copy);
    font-size: 16px;
    line-height: 1.75;
}

.gm-read[b-gslmip283r]  > *:first-child {
    margin-top: 0;
}

.gm-read[b-gslmip283r]  p {
    margin: 0 0 1em;
}

.gm-read[b-gslmip283r]  h1,
.gm-read[b-gslmip283r]  h2,
.gm-read[b-gslmip283r]  h3,
.gm-read[b-gslmip283r]  h4 {
    font-family: 'Cinzel', serif;
    color: var(--dnd-ink);
    margin: 1.4em 0 0.5em;
    /* Le sommaire mène ici : un peu d'air au-dessus du titre vise, sinon il se colle au bord haut
       de la colonne. Cette marge se mesure depuis le conteneur qui defile, et c'est .gm-main depuis
       le passage au cadre unique — plus la fenetre. Elle valait donc la hauteur de la barre de
       navigation, qui est aujourd'hui hors de ce conteneur : le titre atterrissait 126px trop bas. */
    scroll-margin-top: 16px;
}

.gm-read[b-gslmip283r]  h1 { font-size: 1.5em; }
.gm-read[b-gslmip283r]  h2 { font-size: 1.3em; }
.gm-read[b-gslmip283r]  h3 { font-size: 1.15em; }
.gm-read[b-gslmip283r]  h4 { font-size: 1.05em; }

.gm-read[b-gslmip283r]  a {
    color: var(--dnd-gold-bright);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.gm-read[b-gslmip283r]  ul,
.gm-read[b-gslmip283r]  ol {
    margin: 0 0 1em;
    padding-left: 1.4em;
}

.gm-read[b-gslmip283r]  li {
    margin-bottom: 0.3em;
}

.gm-read[b-gslmip283r]  li::marker {
    color: var(--dnd-ink-faint);
}

.gm-read[b-gslmip283r]  blockquote {
    margin: 0 0 1em;
    border-left: 3px solid var(--dnd-gold);
    padding-left: 14px;
    font-style: italic;
    color: var(--dnd-ink-dim);
}

.gm-read[b-gslmip283r]  code {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 0.88em;
}

.gm-read[b-gslmip283r]  pre {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    padding: 12px 14px;
    overflow-x: auto;
    margin: 0 0 1em;
}

.gm-read[b-gslmip283r]  pre code {
    background: transparent;
    padding: 0;
}

/* Les tableaux de l'export Notion montent à 6 colonnes : ils doivent défiler dans leur propre
   conteneur, jamais entraîner la page de côté. */
.gm-read[b-gslmip283r]  .gm-note-table-scroll,
.gm-read[b-gslmip283r]  table {
    max-width: 100%;
    overflow-x: auto;
}

.gm-read[b-gslmip283r]  table {
    display: block;
    border-collapse: collapse;
    margin: 0 0 1em;
    font-size: 0.92em;
}

.gm-read[b-gslmip283r]  th,
.gm-read[b-gslmip283r]  td {
    border: 1px solid var(--dnd-border);
    padding: 6px 10px;
    text-align: left;
}

.gm-read[b-gslmip283r]  th {
    font-family: 'Cinzel', serif;
    background: rgba(201, 162, 39, 0.08);
    color: var(--dnd-ink);
}

.gm-read[b-gslmip283r]  img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.gm-read[b-gslmip283r]  figure {
    margin: 0 0 1em;
}

.gm-read[b-gslmip283r]  figcaption {
    color: var(--dnd-ink-faint);
    font-size: 0.85em;
    margin-top: 4px;
}

.gm-read[b-gslmip283r]  hr {
    border: none;
    border-top: 1px solid var(--dnd-border-strong);
    margin: 1.5em 0;
}

.gm-read[b-gslmip283r]  input[type="checkbox"] {
    margin-right: 6px;
    accent-color: var(--dnd-green);
}

/* Encadrés typés, produits par GmNotePanelRenderer. La couleur est le seul indice du type : elle
   doit se lire d'un coup d'œil pendant une partie, sans lire le libellé. */
.gm-read[b-gslmip283r]  .gm-note-panel {
    border: 1px solid var(--dnd-blue);
    border-left-width: 3px;
    border-radius: 8px;
    background: rgba(62, 90, 107, 0.15);
    padding: 10px 14px;
    margin: 0 0 1em;
}

.gm-read[b-gslmip283r]  .gm-note-panel-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 4px;
    font-family: 'Cinzel', serif;
    font-size: 0.8em;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dnd-blue-text);
}

.gm-read[b-gslmip283r]  .gm-note-panel > *:last-child {
    margin-bottom: 0;
}

.gm-read[b-gslmip283r]  .gm-note-panel-attention {
    border-color: var(--dnd-gold);
    background: rgba(201, 162, 39, 0.1);
}

.gm-read[b-gslmip283r]  .gm-note-panel-attention .gm-note-panel-title {
    color: var(--dnd-gold-bright);
}

.gm-read[b-gslmip283r]  .gm-note-panel-secret {
    border-color: var(--dnd-red);
    background: rgba(138, 42, 42, 0.14);
}

.gm-read[b-gslmip283r]  .gm-note-panel-secret .gm-note-panel-title {
    color: var(--dnd-red-text);
}

.gm-read[b-gslmip283r]  .gm-note-panel-idee {
    border-color: var(--dnd-green);
    background: rgba(62, 107, 79, 0.14);
}

.gm-read[b-gslmip283r]  .gm-note-panel-idee .gm-note-panel-title {
    color: var(--dnd-green-text);
}

.gm-read[b-gslmip283r]  .gm-note-panel-combat {
    border-color: var(--dnd-border-strong);
    background: rgba(107, 92, 66, 0.16);
}

.gm-read[b-gslmip283r]  .gm-note-panel-combat .gm-note-panel-title {
    color: var(--dnd-ink-dim);
}

/* Lien vers une sous-page et fichier joint, produits par le rendu de la forme blocs — encore servie
   tant qu'une page n'est pas convertie. */
.gm-read[b-gslmip283r]  .gm-note-childpage,
.gm-read[b-gslmip283r]  .gm-note-file,
.gm-read[b-gslmip283r]  .gm-note-bookmark {
    display: inline-block;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--dnd-border);
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 0.6em;
    text-decoration: none;
}

.gm-read[b-gslmip283r]  .gm-note-childpage:hover,
.gm-read[b-gslmip283r]  .gm-note-file:hover,
.gm-read[b-gslmip283r]  .gm-note-bookmark:hover {
    border-color: var(--dnd-gold);
}

.gm-read[b-gslmip283r]  .gm-note-callout {
    display: flex;
    gap: 10px;
    background: rgba(62, 90, 107, 0.15);
    border: 1px solid var(--dnd-blue);
    border-left-width: 3px;
    border-radius: 8px;
    padding: 10px 14px;
    margin: 0 0 1em;
}

.gm-read[b-gslmip283r]  .gm-note-unsupported {
    border: 1px dashed var(--dnd-border-strong);
    border-radius: 8px;
    padding: 8px 10px;
    margin: 0 0 1em;
}

.gm-read[b-gslmip283r]  .gm-note-unsupported-label {
    color: var(--dnd-ink-faint);
    font-size: 0.8em;
}

/* ------------------------------------------------------------------ sommaire */

.gm-toc[b-gslmip283r] {
    flex-shrink: 0;
    width: 190px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 26px 14px;
    border-left: 1px solid var(--dnd-border);
    overflow-y: auto;
}

.gm-toc-head[b-gslmip283r] {
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dnd-ink-faint);
    margin-bottom: 4px;
}

/* flex-shrink: 0 est ce qui rend ces liens lisibles, et il va de pair avec overflow: hidden.
   .gm-toc est un conteneur flex en colonne : chaque lien y est un element flex, donc compressible
   par defaut. Ce qui empeche normalement un element flex de passer sous la hauteur de son contenu,
   c'est sa taille minimale automatique — mais overflow different de visible la ramene a zero. Les
   deux reunis, sur une page a 51 titres ("Copie"), ecrasaient chaque ligne a 10px pour 17,5px de
   hauteur de ligne : les lettres etaient rognees en haut et en bas, et le sommaire entier devenait
   illisible. Le conteneur ne defilait meme pas (scrollHeight == clientHeight), puisque tout avait
   ete comprime pour tenir. Sans compression, le debordement revient a .gm-toc et son overflow-y.

   white-space: nowrap, lui, est ce qui rend text-overflow: ellipsis effectif : sans lui un intitule
   long ("Les PJ doivent donc trouver leur methode d'infiltration") s'etalerait sur trois lignes au
   lieu d'etre tronque a une seule. */
.gm-toc-link[b-gslmip283r] {
    display: block;
    flex-shrink: 0;
    color: var(--dnd-ink-dim);
    font-size: 12.5px;
    line-height: 1.4;
    padding: 2px 0;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gm-toc-link:hover[b-gslmip283r] {
    color: var(--dnd-gold-bright);
}

.gm-toc-link.level-3[b-gslmip283r] {
    padding-left: 10px;
    font-size: 12px;
}


/* ------------------------------------------------------------------ deplacer vers... */

/* GmMovePageDialog n'est pas niché sous .gm-sidebar ni .gm-main (position: fixed, superposé à tout
   l'écran) : ::deep seul, sans sélecteur parent, reste valide et suffit à percer l'isolation CSS. */
[b-gslmip283r] .gm-move-dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(12, 10, 8, 0.6);
}

[b-gslmip283r] .gm-move-dialog {
    position: fixed;
    left: 50%;
    top: 16dvh;
    transform: translateX(-50%);
    z-index: 61;
    display: flex;
    flex-direction: column;
    width: min(420px, 92vw);
    max-height: 64dvh;
    background: var(--dnd-panel-1);
    border: 1px solid var(--dnd-border-strong);
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
    padding: 14px;
}

[b-gslmip283r] .gm-move-dialog-title {
    color: var(--dnd-label-gold);
    font-family: 'Cinzel', serif;
    font-size: 13px;
    letter-spacing: 0.04em;
    margin-bottom: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-gslmip283r] .gm-move-search {
    width: 100%;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--dnd-border);
    border-radius: 8px;
    color: var(--dnd-ink);
    font-size: 13px;
    padding: 7px 10px;
    margin-bottom: 8px;
}

[b-gslmip283r] .gm-move-search:focus {
    outline: none;
    border-color: var(--dnd-gold);
}

[b-gslmip283r] .gm-move-list {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

[b-gslmip283r] .gm-move-root,
[b-gslmip283r] .gm-move-hit {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 6px 8px;
    color: var(--dnd-ink-dim);
    font-size: 13px;
    cursor: pointer;
}

[b-gslmip283r] .gm-move-root {
    margin-bottom: 6px;
    border-bottom: 1px solid var(--dnd-border);
    border-radius: 6px 6px 0 0;
}

[b-gslmip283r] .gm-move-root:hover,
[b-gslmip283r] .gm-move-hit:hover {
    border-color: var(--dnd-gold);
    color: var(--dnd-ink);
}

[b-gslmip283r] .gm-move-hit-path {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--dnd-ink-faint);
    font-size: 11px;
}

[b-gslmip283r] .gm-move-empty {
    color: var(--dnd-ink-faint);
    font-size: 13px;
    font-style: italic;
    padding: 6px 8px;
}

[b-gslmip283r] .gm-move-tree {
    list-style: none;
    margin: 0;
    padding: 0;
}

[b-gslmip283r] .gm-move-tree-nested {
    padding-left: 16px;
}

[b-gslmip283r] .gm-move-row {
    display: flex;
    align-items: center;
    gap: 2px;
}

[b-gslmip283r] .gm-move-toggle,
[b-gslmip283r] .gm-move-toggle-placeholder {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--dnd-ink-faint);
    cursor: pointer;
    padding: 0;
}

[b-gslmip283r] .gm-move-toggle svg {
    transition: transform 150ms ease;
}

[b-gslmip283r] .gm-move-toggle.expanded svg {
    transform: rotate(90deg);
}

[b-gslmip283r] .gm-move-row-link {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    text-align: left;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 5px 6px;
    color: var(--dnd-ink-dim);
    font-size: 13px;
    cursor: pointer;
}

[b-gslmip283r] .gm-move-row-link:hover {
    border-color: var(--dnd-gold);
    color: var(--dnd-ink);
}

[b-gslmip283r] .gm-move-row-icon {
    flex-shrink: 0;
    font-size: 12px;
}

[b-gslmip283r] .gm-move-row-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Aligné sur le seuil de bascule mobile de la navigation principale (NavMenu.razor.css). */
@media (max-width: 860px) {
    /* L'arborescence passe en tiroir : le cadre n'a plus qu'une colonne, le document. */
    .gm-hamburger[b-gslmip283r] {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .gm-sidebar[b-gslmip283r] {
        position: fixed;
        top: 0;
        left: 0;
        height: 100dvh;
        width: min(85vw, 320px);
        border-right: 1px solid var(--dnd-border);
        z-index: 1020;
        transform: translateX(-100%);
        /* visibility retardée : retire le tiroir fermé de l'ordre de tabulation et de l'arbre
           d'accessibilité, sinon toute l'arborescence reste atteignable au clavier avant le
           contenu principal. */
        visibility: hidden;
        transition: transform 280ms ease, visibility 0s 280ms;
    }

    .sidebar-open .gm-sidebar[b-gslmip283r] {
        transform: translateX(0);
        visibility: visible;
        transition: transform 280ms ease;
    }

    .gm-sidebar-backdrop[b-gslmip283r] {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(12, 10, 8, 0.6);
        z-index: 1010;
    }

    .sidebar-open .gm-sidebar-backdrop[b-gslmip283r] {
        display: block;
    }

    .gm-main[b-gslmip283r] {
        padding: 16px;
    }

    /* Le sommaire disparaît plutôt que de passer sous le texte : à cette largeur il doublerait le
       défilement au lieu de l'abréger, et le fil d'Ariane suffit à se repérer. */
    .gm-toc[b-gslmip283r] {
        display: none;
    }

    /* Le fil d'Ariane ne tient pas : seule la page ouverte reste, le retour campagne étant déjà
       porté par sa pilule. */
    .gm-topbar-crumbs .gm-crumb:not(.current)[b-gslmip283r],
    .gm-topbar-crumbs .gm-crumb-sep[b-gslmip283r] {
        display: none;
    }

    .gm-page-title[b-gslmip283r] {
        font-size: 22px;
    }

    [b-gslmip283r] .gm-move-dialog {
        width: 92vw;
        top: 10dvh;
        max-height: 78dvh;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gm-sidebar[b-gslmip283r] {
        transition: none;
    }

    .gm-sidebar[b-gslmip283r]  .gm-tree-toggle svg {
        transition: none;
    }

    [b-gslmip283r] .gm-move-toggle svg {
        transition: none;
    }
}
/* /Components/Pages/GrimoireReader.razor.rz.scp.css */
.grimoire-shell[b-0afpw0nqc3] {
    --grimoire-parchment-1: #F1E5C4;
    --grimoire-parchment-2: #E4D3A6;
    --grimoire-parchment-ink: #3B2B18;
    --grimoire-parchment-ink-dim: #6B5636;
    --grimoire-parchment-border: #B79A5E;

    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 20px;
    align-items: start;
    position: relative;
}

.grimoire-hamburger[b-0afpw0nqc3] {
    display: none;
    font-family: 'Cinzel', serif;
    font-size: 12px;
    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 16px;
    cursor: pointer;
    margin-bottom: 12px;
}

.grimoire-sidebar-backdrop[b-0afpw0nqc3] {
    display: none;
    padding: 0;
    border: none;
}

.grimoire-sidebar[b-0afpw0nqc3] {
    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);
    padding: 16px;
    position: sticky;
    top: 16px;
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
}

/* Sommaire rendu par GrimoireOutlineNavigation (composant enfant) : ::deep requis, l'isolation
   CSS Blazor ne propage pas le scope aux enfants. */
.grimoire-sidebar[b-0afpw0nqc3]  .grimoire-nav-empty {
    color: var(--dnd-ink-faint);
    font-size: 13px;
}

.grimoire-sidebar[b-0afpw0nqc3]  .grimoire-nav-toggle-all {
    display: block;
    width: 100%;
    margin-bottom: 10px;
    padding: 6px 8px;
    background: transparent;
    border: 1px solid var(--dnd-border);
    border-radius: 6px;
    color: var(--dnd-ink-dim);
    font-family: 'Cinzel', serif;
    font-size: 11px;
    letter-spacing: 0.05em;
    cursor: pointer;
}

.grimoire-sidebar[b-0afpw0nqc3]  .grimoire-nav-toggle-all:hover {
    border-color: var(--dnd-gold);
    color: var(--dnd-ink);
}

.grimoire-sidebar[b-0afpw0nqc3]  .grimoire-nav-tree {
    list-style: none;
    margin: 0;
    padding: 0;
}

.grimoire-sidebar[b-0afpw0nqc3]  .grimoire-nav-tree-nested {
    list-style: none;
    padding-left: 22px;
    margin: 2px 0 0;
}

.grimoire-sidebar[b-0afpw0nqc3]  .grimoire-nav-node {
    margin: 2px 0;
}

.grimoire-sidebar[b-0afpw0nqc3]  .grimoire-nav-h1-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.grimoire-sidebar[b-0afpw0nqc3]  .grimoire-nav-toggle {
    flex-shrink: 0;
    width: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--dnd-ink-faint);
    cursor: pointer;
    padding: 0;
}

.grimoire-sidebar[b-0afpw0nqc3]  .grimoire-nav-toggle svg {
    transition: transform 150ms ease;
}

.grimoire-sidebar[b-0afpw0nqc3]  .grimoire-nav-link {
    display: block;
    width: 100%;
    text-align: left;
    border-radius: 6px;
    padding: 6px 8px;
    color: var(--dnd-ink-dim);
    font-size: 13px;
    text-decoration: none;
}

.grimoire-sidebar[b-0afpw0nqc3]  .grimoire-nav-link:hover {
    background: rgba(201, 162, 39, 0.1);
    color: var(--dnd-ink);
}

.grimoire-sidebar[b-0afpw0nqc3]  .grimoire-nav-link-h1 {
    font-family: 'Cinzel', serif;
    letter-spacing: 0.03em;
    color: var(--dnd-ink);
}

.grimoire-sidebar[b-0afpw0nqc3]  .grimoire-nav-link-h2 {
    font-size: 12px;
    color: var(--dnd-ink-faint);
}

.grimoire-book[b-0afpw0nqc3] {
    position: relative;
    background: radial-gradient(ellipse at 50% 0%, var(--grimoire-parchment-1) 0%, var(--grimoire-parchment-2) 100%);
    border: 1px solid var(--grimoire-parchment-border);
    border-radius: 10px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), inset 0 0 60px rgba(59, 43, 24, 0.08);
    height: auto;
    overflow: visible;
}

.grimoire-pages[b-0afpw0nqc3] {
    position: relative;
    padding: 32px 40px;
}

.grimoire-empty-page[b-0afpw0nqc3] {
    text-align: center;
    color: var(--grimoire-parchment-ink-dim);
    font-style: italic;
    padding: 60px 0;
}

.grimoire-content-editor[b-0afpw0nqc3] {
    font-family: 'Courier New', monospace;
    font-size: 13px;
}

.grimoire-rendered-content[b-0afpw0nqc3] {
    font-family: 'Alegreya', 'EB Garamond', Georgia, serif;
    font-size: 18px;
    line-height: 1.65;
    color: var(--grimoire-parchment-ink);
    max-width: 65ch;
    margin: 0 auto;
}

.grimoire-rendered-content[b-0afpw0nqc3]  h1,
.grimoire-rendered-content[b-0afpw0nqc3]  h2,
.grimoire-rendered-content[b-0afpw0nqc3]  h3 {
    color: var(--grimoire-parchment-ink);
    scroll-margin-top: 16px;
}

.grimoire-rendered-content[b-0afpw0nqc3]  h1 {
    font-size: 1.5em;
}

.grimoire-rendered-content[b-0afpw0nqc3]  h2 {
    font-size: 1.25em;
}

.grimoire-rendered-content[b-0afpw0nqc3]  h3 {
    font-size: 1.1em;
}

.grimoire-rendered-content[b-0afpw0nqc3]  p {
    color: var(--grimoire-parchment-ink);
}

.grimoire-rendered-content[b-0afpw0nqc3]  a {
    color: #6B4E12;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

.grimoire-rendered-content[b-0afpw0nqc3]  blockquote {
    border-left: 3px solid var(--grimoire-parchment-border);
    margin: 0 0 1rem;
    padding: 4px 16px;
    color: var(--grimoire-parchment-ink-dim);
    font-style: italic;
}

.grimoire-rendered-content[b-0afpw0nqc3]  code {
    background: rgba(59, 43, 24, 0.08);
    border-radius: 4px;
    padding: 1px 5px;
    color: var(--grimoire-parchment-ink);
}

.grimoire-rendered-content[b-0afpw0nqc3]  pre {
    background: rgba(59, 43, 24, 0.08);
    border-radius: 8px;
    padding: 12px 16px;
    overflow-x: auto;
}

.grimoire-rendered-content[b-0afpw0nqc3]  table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}

.grimoire-rendered-content[b-0afpw0nqc3]  th,
.grimoire-rendered-content[b-0afpw0nqc3]  td {
    border: 1px solid var(--grimoire-parchment-border);
    padding: 6px 10px;
    text-align: left;
}

.grimoire-rendered-content[b-0afpw0nqc3]  th {
    font-family: 'Cinzel', serif;
    background: rgba(59, 43, 24, 0.06);
}

.grimoire-rendered-content[b-0afpw0nqc3]  img {
    max-width: 100%;
    border-radius: 6px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

/* Aligné sur le seuil de bascule mobile de la navigation principale (NavMenu.razor.css:96) :
   avec un seuil différent, la nav passait déjà en mode desktop entre 861 et 900px alors que le
   sommaire du grimoire était encore en tiroir modal (voir G-10). */
@media (max-width: 860px) {
    .grimoire-shell[b-0afpw0nqc3] {
        display: block;
    }

    .grimoire-hamburger[b-0afpw0nqc3] {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .grimoire-sidebar[b-0afpw0nqc3] {
        position: fixed;
        top: 0;
        left: 0;
        height: 100dvh;
        width: min(85vw, 320px);
        border-radius: 0;
        /* Au-dessus de la navigation sticky (1005) : un tiroir modal ouvert doit couvrir tout le
           reste de l'interface. */
        z-index: 1020;
        transform: translateX(-100%);
        /* visibility (avec un delai egal a la duree du transform) retire le tiroir ferme de l'ordre
           de tabulation et de l'arbre d'accessibilite : sans ca, 46 elements focusables restaient
           atteignables au clavier/lecteur d'ecran avant le contenu principal. */
        visibility: hidden;
        transition: transform 280ms ease, visibility 0s 280ms;
    }

    .sidebar-open .grimoire-sidebar[b-0afpw0nqc3] {
        transform: translateX(0);
        visibility: visible;
        transition: transform 280ms ease;
    }

    .grimoire-sidebar-backdrop[b-0afpw0nqc3] {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(12, 10, 8, 0.6);
        z-index: 1010;
    }

    .sidebar-open .grimoire-sidebar-backdrop[b-0afpw0nqc3] {
        display: block;
    }

    .grimoire-pages[b-0afpw0nqc3] {
        padding: 20px;
    }

    .grimoire-rendered-content[b-0afpw0nqc3] {
        font-size: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .grimoire-sidebar[b-0afpw0nqc3] {
        transition: none;
    }

    .grimoire-sidebar[b-0afpw0nqc3]  .grimoire-nav-toggle svg {
        transition: none;
    }
}
/* /Components/Pages/MapExplorerPage.razor.rz.scp.css */
.map-page-shell[b-374l15t2a5] {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 20px;
    align-items: start;
    position: relative;
}

.map-page-hamburger[b-374l15t2a5] {
    display: none;
    font-family: 'Cinzel', serif;
    font-size: 12px;
    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 16px;
    cursor: pointer;
    margin-bottom: 12px;
}

.map-page-sidebar-backdrop[b-374l15t2a5] {
    display: none;
}

.map-page-sidebar[b-374l15t2a5] {
    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);
    padding: 16px;
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
}

.map-page-list[b-374l15t2a5] {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
}

.map-page-list-item[b-374l15t2a5] {
    display: flex;
    align-items: center;
    gap: 4px;
    border-radius: 6px;
    padding: 4px 6px;
}

.map-page-list-item.active[b-374l15t2a5] {
    background: rgba(201, 162, 39, 0.15);
}

.map-page-list-item a[b-374l15t2a5] {
    flex: 1;
    color: var(--dnd-ink-dim);
    text-decoration: none;
    font-size: 14px;
}

.map-page-list-item.active a[b-374l15t2a5] {
    color: var(--dnd-ink);
    font-weight: 600;
}

.map-page-list-actions[b-374l15t2a5] {
    display: flex;
    gap: 2px;
}

.map-page-list-actions button[b-374l15t2a5] {
    padding: 0 4px;
    font-size: 12px;
}

.map-page-create-form[b-374l15t2a5] {
    border-top: 1px solid var(--dnd-border);
    padding-top: 10px;
}

.map-page-content[b-374l15t2a5] {
    position: relative;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, var(--dnd-panel-1) 0%, var(--dnd-panel-2) 100%);
    border: 1px solid var(--dnd-border);
    border-radius: 10px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
    min-height: 80vh;
    padding: 16px;
}

.map-page-content[b-374l15t2a5]  .map-explorer {
    flex: 1;
}

.map-page-empty[b-374l15t2a5] {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    color: var(--dnd-ink-faint);
    font-style: italic;
}

@media (max-width: 900px) {
    .map-page-shell[b-374l15t2a5] {
        display: block;
    }

    .map-page-hamburger[b-374l15t2a5] {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .map-page-sidebar[b-374l15t2a5] {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: min(85vw, 320px);
        max-height: none;
        border-radius: 0;
        /* Doit rester au-dessus de la barre de navigation (1005) ET du conteneur de contrôles
           Leaflet (1000) : un tiroir modal ouvert doit couvrir tout le reste de l'interface,
           sinon la carte ou la navigation peuvent rester visibles par-dessus le tiroir. */
        z-index: 1020;
        transform: translateX(-100%);
        transition: transform 280ms ease;
    }

    .sidebar-open .map-page-sidebar[b-374l15t2a5] {
        transform: translateX(0);
    }

    .map-page-sidebar-backdrop[b-374l15t2a5] {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(12, 10, 8, 0.6);
        z-index: 1010;
    }

    .sidebar-open .map-page-sidebar-backdrop[b-374l15t2a5] {
        display: block;
    }

    .map-page-content[b-374l15t2a5] {
        padding: 10px;
        min-height: 75vh;
    }
}
/* /Components/Shared/ImagePickerOverlay.razor.rz.scp.css */
/* ::deep est indispensable ici : InputFile rend son <input type="file"> hors du scope CSS
   de ce composant (composant framework distinct), donc un simple "input[type='file']" scopé
   ne l'atteint jamais et le picker natif du navigateur reste visible par-dessus l'overlay. */
.tavern-image-picker-overlay[b-c26nnge19e]  input[type="file"] {
    display: none;
}

/* CONTRAT : le conteneur qui accueille ce composant doit etre positionne (position: relative).
   Cet overlay se dimensionne sur son premier ancetre positionne ; a defaut il remonte jusqu'au
   fond de modale ou a la page et transforme tout l'ecran en zone de clic invisible ouvrant le
   selecteur de fichier. */
.tavern-image-picker-overlay[b-c26nnge19e] {
    position: absolute;
    inset: 0;
    display: block;
    cursor: pointer;
    border-radius: inherit;
    z-index: 2;
}

.tavern-image-picker-badge[b-c26nnge19e] {
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--dnd-gold);
    border: 2px solid var(--dnd-bg-1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: var(--dnd-bg-2);
    transform: scaleX(-1);
    transition: background-color 0.15s ease, opacity 0.15s ease;
}

.tavern-image-picker-hover[b-c26nnge19e] {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(ellipse at center, rgba(12, 10, 8, 0.35) 0%, rgba(12, 10, 8, 0.8) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.tavern-image-picker-hover-pencil[b-c26nnge19e] {
    font-size: 22px;
    line-height: 1;
    color: var(--dnd-gold-bright);
    transform: scaleX(-1);
}

.tavern-image-picker-hover-label[b-c26nnge19e] {
    font-family: 'Cinzel', serif;
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--dnd-gold-bright);
}

.tavern-image-picker-overlay:hover .tavern-image-picker-hover[b-c26nnge19e],
.tavern-image-picker-overlay:focus-within .tavern-image-picker-hover[b-c26nnge19e] {
    opacity: 1;
}

.tavern-image-picker-overlay:hover .tavern-image-picker-badge[b-c26nnge19e] {
    opacity: 0;
}
/* /Components/Shared/LoadingIndicator.razor.rz.scp.css */
.tavern-loading[b-sm0r4nf7i6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 60px 20px;
    text-align: center;
}

/* Disque noir sans cerclage : l'or est porte par un halo diffus plutot que par un trait, qui
   enfermait le blason dans un badge. Le halo est statique — ce sont les ondes des pseudo-elements
   qui bougent, donc plus besoin de le reprendre dans des keyframes.

   Pas d'overflow: hidden ici : les ondes doivent pouvoir sortir du disque. C'est l'image qui se
   rogne elle-meme a la forme du cercle. */
.tavern-loading-logo[b-sm0r4nf7i6] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    position: relative;
    background: #000;
    box-shadow: 0 0 0 1px rgba(201, 162, 39, 0.16), 0 0 16px rgba(201, 162, 39, 0.22), 0 0 40px rgba(201, 162, 39, 0.1);
    display: grid;
    place-items: center;
    animation: tavern-loading-breathe-b-sm0r4nf7i6 2.4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.tavern-loading-logo img[b-sm0r4nf7i6] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* Deux ondes identiques, la seconde decalee a mi-cycle : une onde seule laissait un temps mort
   entre son extinction et sa reapparition, et c'est ce trou qui se lisait comme un a-coup. */
.tavern-loading-logo[b-sm0r4nf7i6]::before,
.tavern-loading-logo[b-sm0r4nf7i6]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(232, 196, 104, 0.5);
    animation: tavern-loading-wave-b-sm0r4nf7i6 2.4s cubic-bezier(0.2, 0.55, 0.3, 1) infinite;
}

.tavern-loading-logo[b-sm0r4nf7i6]::after {
    animation-delay: 1.2s;
}

/* Respiration du disque : l'echelle seule, sans variation d'opacite. Faire clignoter le blason
   entre 55% et 100% se voyait plus que le mouvement lui-meme. */
@keyframes tavern-loading-breathe-b-sm0r4nf7i6 {
    0%, 100% {
        transform: scale(0.97);
    }

    50% {
        transform: scale(1);
    }
}

/* L'onde ne va que dans un sens et son opacite atteint zero avant la fin du cycle : la reprise est
   donc invisible. L'ancienne version rejouait la seconde moitie a l'envers — l'anneau se rétractait
   vers le centre, ce qui donnait un battement saccade au lieu d'une onde. */
@keyframes tavern-loading-wave-b-sm0r4nf7i6 {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }

    70% {
        opacity: 0.1;
    }

    100% {
        transform: scale(1.75);
        opacity: 0;
    }
}

.tavern-loading-message[b-sm0r4nf7i6] {
    font-family: 'Cinzel', serif;
    font-size: 13px;
    letter-spacing: 0.04em;
    color: var(--dnd-ink-dim);
}

/* Une animation infinie est precisement ce que ce reglage demande d'arreter : le blason reste pose,
   halo compris, et le message suffit a dire que la page travaille. */
@media (prefers-reduced-motion: reduce) {
    .tavern-loading-logo[b-sm0r4nf7i6] {
        animation: none;
        transform: none;
    }

    .tavern-loading-logo[b-sm0r4nf7i6]::before,
    .tavern-loading-logo[b-sm0r4nf7i6]::after {
        content: none;
    }
}