/* Couche finale, native Blazor, de l'editeur d'archetypes.
   Elle isole les nouvelles tables de la feuille historique encore chargee
   par le shell du plan de siege. */
.siege-preparation .siege-slot-editor-grid,
.siege-preparation .siege-slot-editor,
.siege-preparation .siege-build-editor,
.siege-preparation .siege-build-section {
    min-width: 0;
}

.siege-preparation table.siege-build-stat-table {
    display: table !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    /* Le menu de ticks est ancré dans la cellule VIT : il doit pouvoir sortir
       du tableau sans être découpé avant T9, T10 et T11. */
    overflow: visible !important;
    color: var(--neon-text) !important;
    background: var(--neon-surface) !important;
    border: 1px solid var(--neon-panel-border) !important;
    border-radius: .5rem !important;
}

.siege-preparation table.siege-build-stat-table thead th {
    position: static !important;
    z-index: auto !important;
    height: auto !important;
    padding: .42rem .5rem !important;
    color: var(--neon-muted) !important;
    background: var(--neon-surface-alt) !important;
    border-color: var(--neon-panel-border) !important;
    font-size: .68rem !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
}

.siege-preparation table.siege-build-stat-table tbody tr,
.siege-preparation table.siege-build-stat-table tbody tr:nth-child(odd),
.siege-preparation table.siege-build-stat-table tbody tr:hover {
    background: var(--neon-surface) !important;
    box-shadow: none !important;
}

.siege-preparation table.siege-build-stat-table th,
.siege-preparation table.siege-build-stat-table td {
    box-sizing: border-box !important;
    width: 25% !important;
    min-width: 0 !important;
    padding: .42rem .5rem !important;
    color: var(--neon-text) !important;
    background: transparent !important;
    border-color: color-mix(in srgb, var(--neon-panel-border) 80%, transparent) !important;
    line-height: 1.25 !important;
    text-align: right !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.siege-preparation table.siege-build-stat-table tbody th {
    font-weight: 800 !important;
    text-align: left !important;
}

.siege-preparation table.siege-build-stat-table tbody td:nth-child(3) {
    color: #78efb0 !important;
    font-weight: 700 !important;
}

.siege-preparation table.siege-build-stat-table tbody td:nth-child(4) {
    color: #83d7fb !important;
    font-weight: 800 !important;
}

.siege-preparation table.siege-build-stat-table input {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: .28rem .38rem !important;
    color: var(--neon-text) !important;
    background: var(--neon-panel-bg) !important;
    border-color: var(--neon-panel-border) !important;
    text-align: right !important;
    font-variant-numeric: tabular-nums;
}

.siege-preparation table.siege-build-stat-table .siege-build-stat-table__base-speed {
    position: relative !important;
    display: table-cell !important;
    padding-left: 3.1rem !important;
    overflow: visible !important;
    z-index: 100;
}

.siege-preparation table.siege-build-stat-table .siege-build-stat-table__base-speed > span {
    display: block;
    width: 100%;
    text-align: right;
}

.siege-preparation table.siege-build-stat-table .siege-build-stat-table__base-speed .siege-tick-picker--table {
    position: absolute !important;
    top: 50%;
    left: .45rem;
    transform: translateY(-50%);
}

.siege-preparation .siege-build-stat-table__tick-value {
    display: block;
    min-height: 2.1rem;
    padding: .42rem .5rem;
    color: var(--neon-muted);
    font-size: .78rem;
    font-style: italic;
    line-height: 1.25rem;
    text-align: right;
}

/* Badge de tick identique à celui de la modale Decks : même diamètre,
   contraste et placement dans l'angle supérieur droit de la tuile. */
.siege-preparation .siege-preparation-card__tick {
    position: absolute;
    top: 9px;
    right: 10px;
    z-index: 2;
    display: grid;
    width: 1.85rem;
    height: 1.85rem;
    padding: 0;
    place-items: center;
    color: var(--decks-tick-text, #dff9ff);
    font-size: .78rem;
    font-weight: 900;
    line-height: 1;
    border: 1px solid color-mix(in srgb, var(--decks-tick-color, var(--neon-accent)) 92%, #fff);
    border-radius: 999px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--decks-tick-color, var(--neon-accent)) 94%, var(--neon-surface-alt)), color-mix(in srgb, var(--decks-tick-color, var(--neon-accent)) 76%, var(--neon-surface)));
    box-shadow: 0 .15rem .5rem color-mix(in srgb, var(--decks-tick-color, var(--neon-accent)) 48%, transparent);
}

.siege-preparation .siege-tick-picker--table {
    position: relative;
    z-index: 100;
    flex: none;
}

.siege-preparation .siege-tick-picker--table .siege-tick-picker__current {
    display: grid;
    width: 2.2rem;
    height: 2.2rem;
    padding: 0 !important;
    place-items: center;
    color: #f8fbff !important;
    font-size: .82rem !important;
    font-weight: 900;
    border-color: color-mix(in srgb, var(--siege-tick-color, var(--neon-accent)) 78%, var(--neon-panel-border)) !important;
    border-radius: 999px !important;
    background: linear-gradient(145deg, color-mix(in srgb, var(--siege-tick-color, var(--neon-accent)) 70%, var(--neon-surface-alt)), color-mix(in srgb, var(--siege-tick-color, var(--neon-accent)) 42%, var(--neon-surface))) !important;
    box-shadow: 0 .15rem .5rem color-mix(in srgb, var(--siege-tick-color, var(--neon-accent)) 30%, transparent);
}

.siege-preparation .siege-tick-picker--table .siege-tick-picker__menu {
    position: absolute;
    z-index: 1000;
    left: 0;
    bottom: calc(100% + .45rem);
    display: grid;
    width: 12.6rem;
    gap: .28rem;
    padding: .55rem;
    color: var(--neon-text);
    border: 1px solid var(--neon-panel-border);
    border-radius: .55rem;
    background: var(--neon-panel-bg);
    box-shadow: var(--neon-panel-shadow);
}

.siege-preparation .siege-build-section--stats {
    position: relative;
    z-index: 30;
    overflow: visible !important;
}

.siege-preparation .siege-tick-picker--table .siege-tick-picker__menu > strong { color: var(--siege-tick-color, var(--neon-accent)); font-size: .78rem; }
.siege-preparation .siege-tick-picker--table .siege-tick-picker__menu > span { padding-right: 1.25rem; color: var(--neon-muted); font-size: .7rem; }
.siege-preparation .siege-tick-picker--table .siege-tick-picker__close { position: absolute; top: -.55rem; right: -.55rem; display: grid; width: 1.45rem; height: 1.45rem; padding: 0 !important; place-items: center; color: #fecdd3 !important; font-family: Arial, sans-serif; font-size: 1.12rem !important; font-weight: 700; line-height: 0; border: 1px solid rgba(251, 113, 133, .62) !important; border-radius: 999px !important; background: rgba(112, 27, 48, .86) !important; }
.siege-preparation .siege-tick-picker--table .siege-tick-picker__clear { width: 100%; min-height: 1.9rem; padding: .3rem .42rem; color: var(--neon-muted); font: inherit; font-size: .76rem; text-align: center; border: 1px dashed var(--neon-panel-border); border-radius: .32rem; background: var(--neon-surface-alt); cursor: pointer; }
.siege-preparation .siege-tick-picker--table .siege-tick-picker__clear:hover, .siege-preparation .siege-tick-picker--table .siege-tick-picker__clear:focus-visible { color: var(--neon-text); border-color: var(--neon-accent); outline: none; }
.siege-preparation .siege-tick-picker--table .siege-tick-picker__options { display: grid; gap: .2rem; }
.siege-preparation .siege-tick-picker--table .siege-tick-picker__options button { display: grid; width: 100%; min-height: 2rem; padding: .34rem .42rem; place-items: center; color: #f8fbff; font-size: .82rem; text-align: center; border: 1px solid color-mix(in srgb, var(--siege-tick-color, var(--neon-accent)) 44%, var(--neon-panel-border)); border-radius: .32rem; background: linear-gradient(100deg, color-mix(in srgb, var(--siege-tick-color, var(--neon-accent)) 88%, var(--neon-surface-alt)), color-mix(in srgb, var(--siege-tick-color, var(--neon-accent)) 68%, var(--neon-surface))); }

.siege-preparation .siege-slot-editor-members > p,
.siege-preparation .siege-build-tick-help {
    min-width: 0;
    white-space: normal !important;
    overflow-wrap: anywhere;
}

.siege-preparation .siege-build-sets > header {
    display: flex !important;
    min-width: 0;
}

.siege-preparation .siege-build-sets > header > strong {
    flex: none;
}

.siege-preparation .siege-build-sets > header > span {
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Chaque alternative de sets reste un groupe autonome. Les afficher en grille
   évite de transformer une liste de possibilités en une longue colonne, sans
   réduire les sélecteurs au point de masquer leurs libellés. */
.siege-preparation .siege-build-set-list {
    display: grid !important;
    /* In the modal's one-card layout, three alternatives fit on a line.
       Explicit breakpoints are more reliable than container queries in the
       embedded browser used for the local planner. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
}

.siege-preparation .siege-build-combination {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    position: relative;
    align-content: start;
    gap: .4rem;
    min-height: 4.2rem;
    margin: 0;
    padding: .5rem;
    border: 1px solid color-mix(in srgb, var(--neon-panel-border) 78%, transparent);
    border-radius: .5rem;
    background: var(--neon-panel-bg);
}

.siege-preparation .siege-build-combination select {
    min-width: 0 !important;
    width: 100% !important;
}

.siege-preparation .siege-build-combination .siege-build-remove {
    position: absolute;
    top: -.42rem;
    right: -.42rem;
    display: grid;
    width: 1.35rem;
    height: 1.35rem;
    padding: 0;
    place-items: center;
    color: var(--neon-text);
    font-size: .65rem;
    line-height: 1;
    border-radius: 999px;
    z-index: 1;
}

.siege-preparation .siege-build-combination-add {
    display: grid;
    min-height: 4.2rem;
    padding: 0;
    place-items: center;
    color: var(--neon-accent);
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1;
    border: 1px dashed color-mix(in srgb, var(--neon-accent) 62%, var(--neon-panel-border));
    border-radius: .5rem;
    background: color-mix(in srgb, var(--neon-surface-alt) 52%, transparent);
}

.siege-preparation .siege-build-combination-add:hover,
.siege-preparation .siege-build-combination-add:focus-visible {
    color: #fff;
    border-style: solid;
    background: color-mix(in srgb, var(--neon-accent) 20%, var(--neon-surface-alt));
}

@media (min-width: 1200px) {
    .siege-preparation .siege-slot-editor-grid .siege-build-set-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .siege-preparation .siege-build-set-list {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (min-width: 1550px) {
    .siege-preparation .siege-slot-editor-grid .siege-build-set-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1900px) {
    .siege-preparation .siege-slot-editor-grid .siege-build-set-list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Les trois emplacements de principale restent sur une même rangée : chaque
   libellé est immédiatement suivi de son sélecteur. */
.siege-preparation .siege-build-main-stats {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: .3rem;
    min-width: 0;
    max-width: 100%;
}

.siege-preparation .siege-build-main-stats__title {
    flex: none;
    white-space: nowrap;
}

.siege-preparation .siege-build-main-stats > label {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    flex: 1 1 0;
    align-items: center;
    gap: .2rem;
    min-width: 0;
}

.siege-preparation .siege-build-main-stats > label > span {
    white-space: nowrap;
    font-size: .72rem;
}

.siege-preparation .siege-build-main-stats select {
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding-inline: .4rem 1.35rem !important;
    font-size: .78rem;
    text-overflow: ellipsis;
}

@media (max-width: 640px) {
    .siege-preparation .siege-build-main-stats {
        flex-wrap: wrap;
    }
}

/* Les deux types d'artéfacts se règlent l'un sous l'autre : chaque priorité
   garde alors assez de largeur pour afficher son effet et son minimum. */
.siege-preparation .siege-build-artifacts {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start;
    gap: .75rem;
}

.siege-preparation .siege-build-artifact-priority {
    display: grid !important;
    grid-template-columns: 1.2rem minmax(12rem, 1fr) minmax(8rem, 10rem) auto !important;
    align-items: center;
    gap: .25rem !important;
    min-width: 0;
}

.siege-preparation .siege-build-artifact-priority--multihit {
    grid-template-columns: 1.2rem minmax(12rem, 1fr) auto !important;
}

.siege-preparation .siege-build-priority-index {
    width: 1.2rem;
    height: 1.2rem;
    font-size: .7rem;
}

.siege-preparation .siege-build-artifact-main {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: .45rem !important;
    min-width: 0;
}

.siege-preparation .siege-build-artifact-main > span {
    flex: none;
    order: 0;
    white-space: nowrap;
}

.siege-preparation .siege-build-artifact-main > select {
    order: 1;
    flex: 0 1 10rem;
    width: 10rem !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

.siege-preparation .siege-build-artifact-priority select {
    min-width: 0 !important;
    width: 100% !important;
    padding-inline: .55rem 2rem !important;
    font-size: .82rem;
}

.siege-preparation .siege-build-artifact-priority input {
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding-inline: .55rem !important;
    text-align: right;
}

.siege-preparation .siege-build-priority-actions {
    display: inline-flex !important;
    grid-column: auto !important;
    grid-row: auto !important;
    flex-direction: row !important;
    gap: .15rem !important;
}

.siege-preparation .siege-build-priority-actions button {
    display: grid;
    width: 1.35rem;
    height: 1.35rem;
    padding: 0 !important;
    place-items: center;
    line-height: 1;
}

.siege-preparation .siege-build-artifact-priority-add {
    display: grid;
    width: 1.8rem;
    height: 1.8rem;
    margin-top: .35rem;
    padding: 0;
    place-items: center;
    color: var(--neon-accent);
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1;
    border: 1px dashed color-mix(in srgb, var(--neon-accent) 62%, var(--neon-panel-border));
    border-radius: .4rem;
    background: color-mix(in srgb, var(--neon-surface-alt) 52%, transparent);
}

/* Les notes de contexte doivent renseigner sans consommer une ligne entière. */
.siege-preparation .siege-slot-editor-hint {
    margin: 0 !important;
    color: var(--neon-muted);
    font-size: .7rem !important;
    line-height: 1.2;
}

.siege-preparation .siege-build-tick-help {
    margin: 0 !important;
}

/* La coche, le portrait et le nom choisissent le ou les monstres auxquels
   l'exception en cours s'applique. L'exclusion est une action séparée. */
.siege-preparation .siege-slot-editor-monster {
    grid-template-columns: minmax(0, 1fr) auto;
    position: relative;
    padding-right: 1.15rem;
    align-items: center;
    min-width: 0;
    cursor: pointer;
    border-color: color-mix(in srgb, #b694f0 68%, var(--neon-panel-border));
    background: color-mix(in srgb, #b694f0 9%, var(--neon-surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #b694f0 16%, transparent);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.siege-preparation .siege-slot-editor-monster.is-included {
    border-color: color-mix(in srgb, #b694f0 68%, var(--neon-panel-border));
    background: color-mix(in srgb, #b694f0 9%, var(--neon-surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #b694f0 16%, transparent);
}

.siege-preparation .siege-slot-editor-monster.is-excluded {
    opacity: .56;
}

.siege-preparation .siege-slot-editor-monster.is-edit-target {
    border-color: color-mix(in srgb, var(--neon-accent) 78%, var(--neon-panel-border));
    background: color-mix(in srgb, var(--neon-accent) 9%, var(--neon-surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--neon-accent) 28%, transparent), 0 0 .7rem color-mix(in srgb, var(--neon-accent) 22%, transparent);
}

.siege-preparation .siege-slot-editor-monster:hover,
.siege-preparation .siege-slot-editor-monster:focus-within {
    border-color: color-mix(in srgb, var(--neon-accent) 80%, var(--neon-panel-border));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--neon-accent) 28%, transparent), 0 0 .7rem color-mix(in srgb, var(--neon-accent) 24%, transparent);
}

.siege-preparation .siege-slot-editor-monster > button:not(.siege-slot-editor-monster__inclusion),
.siege-preparation .siege-slot-editor-monster > button:not(.siege-slot-editor-monster__inclusion):hover,
.siege-preparation .siege-slot-editor-monster > button:not(.siege-slot-editor-monster__inclusion):focus-visible {
    min-width: 0;
    padding: .28rem .38rem;
    color: inherit;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.siege-preparation .siege-slot-editor-monster__included {
    display: grid !important;
    width: 1.45rem;
    height: 1.45rem;
    margin: 0 !important;
    padding: 0 !important;
    place-items: center;
    border: 0 !important;
    background: transparent !important;
    cursor: pointer;
}

.siege-preparation .siege-slot-editor-monster__inclusion {
    position: absolute;
    top: -.42rem;
    right: -.42rem;
    display: grid;
    width: 1.35rem;
    height: 1.35rem;
    padding: 0 !important;
    place-items: center;
    color: var(--neon-text);
    font-size: .65rem;
    line-height: 1;
    border-radius: 999px;
    z-index: 1;
}

.siege-preparation .siege-slot-editor-monster__inclusion.is-included {
    color: var(--neon-text);
}

.siege-preparation .siege-slot-editor-monster__inclusion.is-excluded {
    color: #b7f8cc;
    border-color: color-mix(in srgb, #78efb0 58%, var(--neon-panel-border));
    background: color-mix(in srgb, #78efb0 8%, var(--neon-surface-alt));
}

.siege-preparation .siege-slot-editor-members-head {
    flex-wrap: wrap;
}

.siege-preparation .siege-slot-editor-target-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
    padding-top: .1rem;
    color: var(--neon-muted);
    font-size: .72rem;
}

.siege-preparation .siege-slot-editor-target-summary strong {
    color: var(--neon-accent);
}

.siege-preparation .siege-slot-editor-target-summary button {
    padding: .26rem .45rem;
    font-size: .7rem;
}

.siege-preparation-modal .app-native-modal-footer .siege-archetype-footer-save,
.siege-preparation-modal .app-native-modal-footer .siege-archetype-footer-save:hover,
.siege-preparation-modal .app-native-modal-footer .siege-archetype-footer-save:focus-visible {
    color: #ecfeff;
    border-color: color-mix(in srgb, var(--neon-accent) 82%, var(--neon-panel-border));
    background: linear-gradient(135deg, color-mix(in srgb, var(--neon-accent) 72%, var(--neon-surface-alt)), color-mix(in srgb, var(--neon-accent-strong) 68%, var(--neon-surface)));
    box-shadow: 0 0 .8rem color-mix(in srgb, var(--neon-accent) 20%, transparent);
}

.siege-preparation-modal .app-native-modal-footer .siege-archetype-footer-close,
.siege-preparation-modal .app-native-modal-footer .siege-archetype-footer-close:hover,
.siege-preparation-modal .app-native-modal-footer .siege-archetype-footer-close:focus-visible {
    color: #ffe4e6;
    border-color: color-mix(in srgb, #fb7185 68%, var(--neon-panel-border));
    background: color-mix(in srgb, #9f1239 38%, var(--neon-surface-alt));
}

.siege-preparation .siege-slot-editor-monster__included input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    margin: 0;
    cursor: pointer;
}

.siege-preparation .siege-slot-editor-common.is-active {
    color: #c8ffe1;
    border-color: color-mix(in srgb, #78efb0 84%, var(--neon-panel-border));
    background: color-mix(in srgb, #78efb0 15%, var(--neon-surface-alt));
}

.siege-preparation .siege-slot-editor-common.is-partial {
    color: var(--neon-text);
    border-color: color-mix(in srgb, #9370db 72%, var(--neon-panel-border));
    background: color-mix(in srgb, #9370db 13%, var(--neon-surface-alt));
}

.siege-preparation .siege-build-stat-table__tick-value small {
    color: var(--neon-muted);
    font-size: .72em;
    font-style: normal;
    font-weight: 700;
}

/* Les séparateurs nomment le prochain bloc sans créer de cartes ou de clics
   supplémentaires. Les teintes restent volontairement translucides afin que
   les champs, tableaux et valeurs conservent leur lisibilité. */
.siege-preparation .siege-archetype-divider,
.siege-preparation .siege-build-divider {
    display: flex;
    align-items: center;
    gap: .8rem;
    min-width: 0;
    margin: 0;
    color: var(--neon-muted);
    font-size: .64rem;
    font-weight: 900;
    letter-spacing: .075em;
    line-height: 1;
    text-transform: uppercase;
}

/* Chaque parent a son propre gap. Ces compensations donnent donc partout
   .8rem réels avant et après le séparateur, sans cumul de marges. */
.siege-preparation > .siege-archetype-divider {
    margin-block: -.2rem;
}

.siege-preparation .siege-slot-editor > .siege-build-divider {
    margin-block: .05rem;
}

.siege-preparation .siege-build-editor > .siege-build-divider {
    margin-block: 0;
}

.siege-preparation .siege-archetype-divider::before,
.siege-preparation .siege-archetype-divider::after,
.siege-preparation .siege-build-divider::before,
.siege-preparation .siege-build-divider::after {
    height: 1px;
    flex: 1 1 auto;
    content: "";
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--neon-panel-border) 86%, var(--neon-accent)), transparent);
}

.siege-preparation .siege-archetype-divider > span,
.siege-preparation .siege-build-divider > span {
    padding: .2rem .45rem;
    border: 1px solid color-mix(in srgb, var(--neon-panel-border) 78%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--neon-surface-alt) 72%, transparent);
}

.siege-preparation .siege-slot-editor-members {
    border-left: 2px solid color-mix(in srgb, #78efb0 64%, var(--neon-panel-border));
    background: linear-gradient(100deg, color-mix(in srgb, #78efb0 6%, var(--neon-surface)), var(--neon-surface));
}

.siege-preparation .siege-build-sets,
.siege-preparation .siege-build-section--main-stats {
    border-left: 2px solid color-mix(in srgb, #b694f0 68%, var(--neon-panel-border));
    background: linear-gradient(100deg, color-mix(in srgb, #b694f0 6%, var(--neon-surface)), var(--neon-surface));
}

.siege-preparation .siege-build-section--stats {
    border-left: 2px solid color-mix(in srgb, #58c7f2 72%, var(--neon-panel-border));
    background: linear-gradient(100deg, color-mix(in srgb, #58c7f2 6%, var(--neon-surface)), var(--neon-surface));
}

.siege-preparation .siege-build-artifacts .siege-build-artifact:first-child {
    border-left: 2px solid color-mix(in srgb, #e5a9fb 74%, var(--neon-panel-border));
    background: linear-gradient(100deg, color-mix(in srgb, #e5a9fb 7%, var(--neon-surface)), var(--neon-surface));
}

.siege-preparation .siege-build-artifacts .siege-build-artifact:last-child {
    border-left: 2px solid color-mix(in srgb, #f6cf6d 74%, var(--neon-panel-border));
    background: linear-gradient(100deg, color-mix(in srgb, #f6cf6d 7%, var(--neon-surface)), var(--neon-surface));
}

.siege-preparation .siege-build-calculation {
    border-left: 2px solid color-mix(in srgb, var(--neon-muted) 66%, var(--neon-panel-border));
    background: color-mix(in srgb, var(--neon-surface-alt) 54%, var(--neon-surface));
}

/* Une même gouttière entre chaque accent coloré et son contenu évite que les
   titres, aides, champs et boutons paraissent collés à la bordure de section. */
.siege-preparation .siege-slot-editor-members,
.siege-preparation .siege-build-sets,
.siege-preparation .siege-build-section--main-stats,
.siege-preparation .siege-build-section--stats,
.siege-preparation .siege-build-artifact,
.siege-preparation .siege-build-calculation {
    padding-inline: 1.15rem !important;
    padding-block: .75rem !important;
}

.siege-preparation .siege-build-sets > header {
    gap: .4rem;
}

.siege-preparation .siege-build-sets > header > span {
    font-size: .64rem;
}

/* Lecture mobile de la fiche membre : les colonnes de statistiques deviennent
   des valeurs explicitement étiquetées, au lieu d'un tableau illisible. Cette
   feuille est chargée après la compatibilité historique et doit donc porter
   les règles finales avec la même priorité. */
@media (max-width: 640px) {
    .siege-preparation table.siege-build-stat-table,
    .siege-preparation table.siege-build-stat-table tbody {
        display: grid !important;
        width: 100% !important;
    }

    .siege-preparation table.siege-build-stat-table thead {
        display: none;
    }

    .siege-preparation table.siege-build-stat-table tbody {
        gap: .5rem;
        padding: .5rem;
    }

    .siege-preparation table.siege-build-stat-table tbody tr {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .3rem;
        padding: .45rem;
        border: 1px solid color-mix(in srgb, var(--neon-panel-border) 78%, transparent);
        border-radius: .45rem;
        background: var(--neon-panel-bg) !important;
    }

    .siege-preparation table.siege-build-stat-table tbody th,
    .siege-preparation table.siege-build-stat-table tbody td {
        display: grid !important;
        width: auto !important;
        min-height: 2.6rem;
        padding: .3rem !important;
        border: 0 !important;
        overflow: visible !important;
        text-align: left !important;
    }

    .siege-preparation table.siege-build-stat-table tbody th {
        grid-column: 1 / -1;
        min-height: auto;
        padding: .05rem .3rem .2rem !important;
        color: var(--neon-text) !important;
        font-size: .85rem;
    }

    .siege-preparation table.siege-build-stat-table tbody td {
        align-content: start;
        gap: .12rem;
        font-size: .86rem;
        font-variant-numeric: tabular-nums;
    }

    .siege-preparation table.siege-build-stat-table tbody td::before {
        color: var(--neon-muted);
        font-size: .62rem;
        font-weight: 800;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .siege-preparation table.siege-build-stat-table tbody td:nth-of-type(1)::before { content: "Base"; }
    .siege-preparation table.siege-build-stat-table tbody td:nth-of-type(2)::before { content: "Bonus"; }
    .siege-preparation table.siege-build-stat-table tbody td:nth-of-type(3)::before { content: "Total"; }

    .siege-preparation table.siege-build-stat-table .siege-build-stat-table__base-speed {
        position: static !important;
        padding-left: .3rem !important;
    }

    .siege-preparation table.siege-build-stat-table .siege-build-stat-table__base-speed > span,
    .siege-preparation .siege-build-stat-table__tick-value {
        min-height: 0;
        padding: 0;
        text-align: left;
    }
}

/* L'ordre, la compétence initiale et le SpeedTune forment une seule ligne
   compacte; ils ne passent à la ligne qu'en dessous de leur largeur utile. */
.siege-preparation .siege-preparation-turn-order {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: .4rem;
}

.siege-preparation .siege-preparation-turn-order label.siege-preparation-turn-order__skill,
.siege-preparation .siege-preparation-turn-order label.siege-preparation-turn-order__speed {
    display: inline-flex !important;
    flex: none;
    flex-direction: row !important;
    align-items: center;
    gap: .35rem !important;
    margin: 0;
}

.siege-preparation .siege-preparation-turn-order__skill > span {
    color: var(--neon-muted);
    font-size: .78rem;
    font-weight: 700;
}

.siege-preparation .siege-preparation-turn-order__skill select {
    width: clamp(7.5rem, 11vw, 10.5rem) !important;
    min-width: 0 !important;
}

.siege-preparation .siege-preparation-draft-status {
    margin-left: auto;
    padding: .22rem .45rem;
    color: var(--neon-muted);
    font-size: .7rem;
    font-weight: 700;
    border: 1px solid color-mix(in srgb, var(--neon-panel-border) 70%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--neon-surface-alt) 58%, transparent);
}

.siege-preparation .siege-preparation-draft-status.is-dirty {
    color: color-mix(in srgb, var(--neon-accent) 76%, var(--neon-text));
    border-color: color-mix(in srgb, var(--neon-accent) 46%, var(--neon-panel-border));
}

/* Les défenses à variantes conservent l'ordre de jeu compact : le détail des
   skills ne s'ouvre qu'au besoin et chaque ligne désigne un trio réellement
   autorisé, jamais un slot abstrait. */
.siege-preparation .siege-preparation-turn-order__skills {
    position: relative;
    flex: none;
    min-width: 0;
}

.siege-preparation .siege-preparation-turn-order__skills > summary {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    min-height: 2.1rem;
    padding: .34rem .55rem;
    color: var(--neon-text);
    font-size: .8rem;
    font-weight: 750;
    cursor: pointer;
    border: 1px solid var(--neon-panel-border);
    border-radius: .42rem;
    background: var(--neon-surface);
}

.siege-preparation .siege-preparation-turn-order__skills > summary > span {
    color: var(--neon-muted);
    font-size: .7rem;
    font-weight: 600;
}

.siege-preparation .siege-preparation-turn-order__skill-variants {
    position: absolute;
    z-index: 1100;
    top: calc(100% + .38rem);
    right: 0;
    display: grid;
    width: min(31rem, calc(100vw - 3rem));
    max-height: min(28rem, 62vh);
    gap: .38rem;
    overflow: auto;
    padding: .6rem;
    border: 1px solid var(--neon-panel-border);
    border-radius: .55rem;
    background: var(--neon-panel-bg);
    box-shadow: var(--neon-panel-shadow);
}

.siege-preparation .siege-preparation-turn-order__skill-variants > label {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(9rem, 11rem);
    align-items: center;
    gap: .55rem;
    min-width: 0;
    margin: 0;
    padding: .42rem .5rem;
    border: 1px solid color-mix(in srgb, var(--neon-panel-border) 72%, transparent);
    border-radius: .4rem;
    background: var(--neon-surface);
}

.siege-preparation .siege-preparation-turn-order__skill-variants > label > span {
    min-width: 0;
    overflow: hidden;
    color: var(--neon-text);
    font-size: .78rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.siege-preparation .siege-preparation-turn-order__skill-variants select {
    min-width: 0;
    width: 100%;
}

@media (max-width: 1180px) {
    .siege-preparation .siege-slot-editor-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .siege-preparation .siege-slot-editor {
        width: auto;
        max-width: 100%;
    }
}