/* =========================================================
   Beyond Lightspeed — Pages Systèmes
   Vue d'ensemble de la fiche d'un système (SystemOverviewTab), préfixe sov-.
   La grille .sys-overview-grid reste déclarée par SystemDetailPanel, avec
   les autres classes sys-* de la page.
   ========================================================= */

/* ── Page : liste latérale et fiche (gabarit commun, template.css) ──
   La liste se colle sous l'en-tête de page, dont la hauteur est mesurée dans
   --sys-header-offset (Systems.jsx). Ces règles vivaient dans un bloc
   <style> de la page. */
.sys-layout {
    --tpl-list-w: 280px;
    --tpl-min-h: 0;
    --tpl-sticky-top: calc(var(--sys-header-offset, 0px) + 16px);
    align-items: flex-start;
}
.tpl-sidebar.sys-sidebar { padding: 16px; box-sizing: border-box; }
.tpl-list.sys-list { padding: 0 4px 0 0; gap: 8px; }
.system-sidebar-item { transition: all 0.2s ease; }
@media (hover: hover) {
    .system-sidebar-item:hover {
        background: rgba(255, 255, 255, 0.06) !important;
        border-color: rgba(0, 229, 255, 0.3) !important;
    }
}

/* ── Cartes de la vue d'ensemble ── */
.sov-card {
    padding: 14px 16px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}
.sov-card--cyan { border-color: rgba(0, 229, 255, 0.2); }
.sov-card--green { border-color: rgba(0, 230, 118, 0.2); }
.sov-card--amber { border-color: rgba(255, 170, 0, 0.2); }
.sov-card--purple { border-color: rgba(180, 124, 255, 0.2); }
.sov-card--wide { grid-column: 1 / -1; }

.sov-title {
    font-size: var(--text-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.sov-sep {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 10px 0;
}

/* ── Couleurs et graisses du texte ── */
.sov-primary { color: var(--color-text-primary); }
.sov-secondary { color: var(--color-text-secondary); }
.sov-muted { color: var(--color-text-muted); }
.sov-cyan { color: var(--color-accent-cyan); }
.sov-green { color: var(--color-accent-green); }
.sov-amber { color: var(--color-accent-amber); }
.sov-purple { color: var(--color-accent-purple); }
.sov-red { color: var(--color-accent-red); }
.sov-mono { font-family: var(--font-mono); }
.sov-bold { font-weight: bold; }
.sov-xs { font-size: var(--text-xs); }

/* ── Lignes « libellé — valeur » ── */
.sov-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--text-xs);
}
.sov-row--wrap { flex-wrap: wrap; gap: 6px; }
.sov-row--top { align-items: flex-start; }
.sov-row--gap8 { gap: 8px; }
.sov-row--mb6 { margin-bottom: 6px; }
.sov-row--mb8 { margin-bottom: 8px; }

/* Valeur suivie de ses actions (sablier, Annuler, Changer…). */
.sov-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Complément discret accolé à une valeur : « (+2 ⛏) », « (−1) ». */
.sov-aside {
    font-size: var(--text-xs);
    margin-left: 4px;
}

.sov-race { font-weight: 600; }

/* Habitants ajoutés à chaque tour par les marchandises. */
.sov-growth {
    font-size: var(--text-xs);
    color: var(--color-accent-green);
    margin-bottom: 6px;
}
.sov-right { text-align: right; }

/* Libellé porteur d'une infobulle. */
.sov-hint {
    cursor: help;
    border-bottom: 1px dotted rgba(139, 153, 184, 0.6);
}

/* ── Liens de chargement des cargos ── */
.sov-cargo {
    font-size: var(--text-xs);
    margin-left: 6px;
}
.sov-cargo-link { text-decoration: none; }
.sov-cargo-link--load,
.sov-cargo-link--load:hover {
    color: var(--color-accent-cyan);
}
.sov-cargo-link--load { margin-right: 4px; }
.sov-cargo-link--unload,
.sov-cargo-link--unload:hover {
    color: var(--color-accent-amber);
}

/* ── Civilisations colonisables (section repliable) ── */
.sov-colonize { padding-top: 8px; padding-bottom: 8px; }
.sov-colonize-summary {
    padding: 0;
    color: var(--color-accent-cyan);
    font-size: var(--text-xs);
    cursor: pointer;
    user-select: none;
}
.sov-colonize-body { padding: 4px 0 0; }
.sov-colonize-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    font-size: var(--text-xs);
    margin-top: 6px;
    padding: 4px 8px;
    border: 1px dashed rgba(255, 255, 255, 0.15);
    border-radius: 4px;
}
.sov-colonize-race {
    font-weight: 600;
    opacity: 0.75;
}

/* ── Budget du système ── */
.sov-budget-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 8px;
}
.sov-budget-head .sov-title { margin-bottom: 0; }
.sov-budget-list {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: var(--text-xs);
}
.sov-note {
    margin-top: 6px;
    font-size: var(--text-xs);
}
.sov-note--spaced { margin-top: 8px; }

/* ── Postes commerciaux ── */
.sov-posts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.sov-post {
    padding: 4px 11px;
    border-radius: 14px;
    border: 1px solid currentColor;
    background: rgba(255, 255, 255, 0.04);
    text-decoration: none;
    font-weight: bold;
    font-size: var(--text-xs);
}
.sov-post--mine,
.sov-post--mine:hover {
    color: var(--color-accent-cyan);
}
.sov-post--other,
.sov-post--other:hover {
    color: var(--color-accent-green);
}
.sov-empty {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

/* ── Boutons ──
   Sélecteurs composés : .btn, .btn-sm, .btn-xs et .btn-ghost (survol compris)
   imposent leur taille, leur marge intérieure, leur couleur et leur bordure. */
.btn.sov-btn {
    font-size: var(--text-xs);
    padding: 1px 6px;
}
/* « Annuler » d'un ordre en attente. */
.btn.sov-btn--cancel,
.btn.sov-btn--cancel:hover {
    color: var(--color-accent-amber);
    border: 1px solid var(--color-accent-amber);
}
.btn.sov-btn--spaced { margin-left: 6px; }
.btn.sov-btn--colonize { padding: 1px 5px; }
.btn.sov-btn--colonize,
.btn.sov-btn--colonize:hover {
    color: var(--color-accent-cyan);
    border: 1px solid rgba(0, 229, 255, 0.3);
}
.btn.sov-btn--budget { padding: 2px 8px; }
.btn.sov-btn--budget,
.btn.sov-btn--budget:hover {
    color: var(--color-accent-purple);
    border: 1px solid rgba(180, 124, 255, 0.3);
}
/* « ⏳ Annuler » de la colonisation du système (bouton sans habillage). */
.btn-reset.sov-uncolonize {
    color: var(--color-accent-amber);
    font-size: var(--text-xs);
    cursor: pointer;
}

/* =========================================================
   Refonte de la rubrique Systèmes (2026-10-02)
   ========================================================= */

/* Les titres d'encart sont désormais des <h3> : on neutralise les marges et
   la taille du navigateur pour garder l'apparence des anciens libellés. */
h3.sov-title { margin: 0 0 10px; font-size: var(--text-xs); font-weight: 600; }

/* ── En-tête de la rubrique : stocks des trois budgets ── */
.sys-points {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px 6px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.sys-points--green { border-color: rgba(0, 230, 118, 0.3); --points-color: var(--color-accent-green); }
.sys-points--purple { border-color: rgba(180, 124, 255, 0.3); --points-color: var(--color-accent-purple); }
.sys-points--cyan { border-color: rgba(0, 229, 255, 0.3); --points-color: var(--color-accent-cyan); }
.sys-points__emblem { flex-shrink: 0; color: var(--points-color); filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.6)); }
.sys-points__body { line-height: 1.25; }
.sys-points__label {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}
.sys-points__value { font-size: 0.9rem; font-weight: 700; color: var(--points-color); }
.sys-points__rate { margin-left: 6px; font-size: 0.75rem; font-weight: 500; color: var(--color-text-muted); }

/* ── En-tête du bloc : occupation du système ── */
.sys-ctrl-occupancy {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    color: var(--color-accent-cyan);
    font-size: var(--text-xs);
}
.sys-ctrl-occupancy__shared { color: var(--color-accent-amber); }

/* ── Jauges de population (couleur de la civilisation) ── */
.sov-pops { display: grid; gap: 9px; }
.sov-pop { display: grid; gap: 3px; }
.sov-pop__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: var(--text-xs); }
.sov-pop__race { color: var(--race-color, var(--color-accent-cyan)); }
.sov-pop__cargo { justify-self: end; font-size: var(--text-xs); }
/* Ce qui modifie le taux de croissance (politique, marchandises), en clair :
   une infobulle `title` resterait invisible au toucher (U-E10). */
.sov-pop__detail { justify-self: end; font-size: var(--text-xs); color: var(--color-text-secondary); }
.pb-growth-detail { color: var(--color-text-secondary); font-family: var(--font-sans); }
.sov-gauge {
    position: relative;
    height: 16px;
    border-radius: 4px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid color-mix(in srgb, var(--race-color, var(--color-accent-cyan)) 45%, transparent);
}
.sov-gauge__fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--fill, 0%);
    background: color-mix(in srgb, var(--race-color, var(--color-accent-cyan)) 60%, transparent);
}
.sov-gauge__label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-primary);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 600;
    text-shadow: 0 1px 2px #000;
}

/* ── Ressources : trois bandeaux illustrés ── */
.ovs.sov-band {
    background-size: cover;
    background-position: right center;
    overflow: hidden;
}
/* Repli tant que l'illustration n'est pas livrée : un dégradé par partie. */
.ovs.sov-band--mines { --ovs-accent: var(--color-accent-amber); background-image: linear-gradient(110deg, rgba(10, 8, 4, 0.9) 35%, rgba(255, 179, 0, 0.16)); }
.ovs.sov-band--finances { --ovs-accent: var(--color-accent-green); background-image: linear-gradient(110deg, rgba(8, 10, 6, 0.9) 35%, rgba(0, 230, 118, 0.14)); }
.ovs.sov-band--energie { --ovs-accent: var(--color-accent-cyan); background-image: linear-gradient(110deg, rgba(4, 8, 12, 0.9) 35%, rgba(0, 229, 255, 0.16)); }
/* Illustration livrée : un voile sombre à gauche garde le texte lisible. */
.ovs.sov-band.has-art {
    background-image:
        linear-gradient(90deg, rgba(3, 6, 12, 0.94) 0%, rgba(3, 6, 12, 0.82) 55%, rgba(3, 6, 12, 0.45) 100%),
        var(--band-art);
}
.sov-band__rows { display: grid; gap: 6px; }
.sov-band__note { margin: 7px 0 0; font-size: var(--text-xs); line-height: 1.4; }

/* ── Postes de gouverneur et d'espion ── */
.lpost__body { display: flex; gap: 12px; align-items: flex-start; }
.lpost__portrait {
    flex-shrink: 0;
    padding: 4px;
    border-radius: 10px;
    background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.4));
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--color-text-muted);
}
.lpost__main { flex: 1; min-width: 0; display: grid; gap: 4px; }
.btn-reset.lpost__portrait-btn {
    flex-shrink: 0;
    padding: 0;
    border-radius: 10px;
    cursor: zoom-in;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-reset.lpost__portrait-btn:hover,
.btn-reset.lpost__portrait-btn:focus-visible {
    transform: scale(1.04);
    box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.55);
}
.lpost__name { color: var(--color-text-bright); font-weight: 700; font-size: var(--text-sm); }
.lpost__meta { color: var(--color-text-secondary); font-size: var(--text-xs); font-weight: 400; }
.lpost__pending { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--color-accent-amber); font-size: var(--text-xs); }
.lpost__empty { color: var(--color-text-secondary); font-size: var(--text-xs); line-height: 1.45; }
.lpost__effects { font-size: var(--text-xs); }

/* ── Fiche d'un lieutenant ── */
.ldm-head { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; margin-bottom: 6px; }
.ldm-portrait {
    flex-shrink: 0;
    padding: 6px;
    border-radius: 14px;
    background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.45));
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: var(--color-text-muted);
}
.ldm-id { flex: 1 1 240px; min-width: 0; display: grid; gap: 4px; }
.ldm-name { color: var(--color-text-bright); font-size: 1.1rem; font-weight: 800; }
.ldm-meta { color: var(--color-text-secondary); font-size: var(--text-xs); }
.ldm-xp { margin-top: 8px; display: grid; gap: 4px; font-size: var(--text-xs); }
.ldm-xp__label { display: flex; justify-content: space-between; gap: 8px; color: var(--color-text-secondary); }
.ldm-xp__value { color: var(--color-text-primary); font-family: var(--font-mono); }
.ldm-xp__gauge {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(180, 124, 255, 0.35);
}
.ldm-xp__gauge::-webkit-progress-bar { background: rgba(255, 255, 255, 0.08); }
.ldm-xp__gauge::-webkit-progress-value { background: linear-gradient(90deg, rgba(180, 124, 255, 0.5), var(--color-accent-purple)); }
.ldm-xp__gauge::-moz-progress-bar { background: linear-gradient(90deg, rgba(180, 124, 255, 0.5), var(--color-accent-purple)); }
.ldm-xp__hint { color: var(--color-text-muted); }
.ldm-reading { color: var(--color-text-secondary); }
.lpost__effects-title,
.lpk-effects__title {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
}
.lpost__effects ul,
.lpk-effects ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.lpost__effects li,
.lpk-effects li { display: flex; justify-content: space-between; gap: 8px; color: var(--color-text-secondary); }
.lpost__effects strong,
.lpk-effects strong { color: var(--color-accent-green); font-family: var(--font-mono); white-space: nowrap; }
.lpost__effects-none,
.lpk-effects__none { color: var(--color-text-muted); }

/* ── Modale de choix d'un lieutenant ── */
.lpk-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 14px;
    margin-bottom: 10px;
}
.lpk-search { flex: 1 1 220px; min-width: 0; }
.lpk-field { display: grid; gap: 3px; font-size: var(--text-xs); color: var(--color-text-secondary); }
.lpk-field .form-input { padding: 6px 28px 6px 8px; font-size: var(--text-xs); min-width: 120px; }
.lpk-field .lpk-min__value { min-width: 0; padding-right: 6px; }
.lpk-min { display: flex; gap: 6px; align-items: center; }
.lpk-min__value { width: 64px; }
.btn.lpk-dir { padding: 4px 9px; }
.lpk-views {
    display: inline-flex;
    margin-left: auto;
    border: 1px solid rgba(0, 229, 255, 0.3);
    border-radius: 6px;
    overflow: hidden;
}
.lpk-view {
    padding: 6px 12px;
    border: 0;
    background: transparent;
    color: var(--color-text-secondary);
    font: inherit;
    font-size: var(--text-xs);
    cursor: pointer;
}
.lpk-view.is-active { background: rgba(0, 229, 255, 0.15); color: var(--color-accent-cyan); font-weight: 700; }
.lpk-summary { margin: 0 0 10px; color: var(--color-text-muted); font-size: var(--text-xs); }
.btn-reset.lpk-reset { margin-left: 10px; color: var(--color-accent-cyan); text-decoration: underline; cursor: pointer; }
.lpk-empty { color: var(--color-text-secondary); font-size: var(--text-sm); padding: 20px 0; text-align: center; }
.lpk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: 12px;
}
.lpk-card {
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-width: 0;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.3);
    transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
/* Réserve : fond vert ; déjà en poste ailleurs : fond orange. */
.lpk-card--reserve { background: rgba(0, 230, 118, 0.09); border-color: rgba(0, 230, 118, 0.38); }
.lpk-card--assigned { background: rgba(255, 152, 0, 0.1); border-color: rgba(255, 152, 0, 0.4); }
.lpk-card--here { background: rgba(0, 229, 255, 0.08); border-color: rgba(0, 229, 255, 0.5); }
.lpk-card--locked { opacity: 0.55; }
.lpk-card.is-selectable { cursor: pointer; }
.lpk-card.is-selectable:hover,
.lpk-card.is-selectable:focus-within { transform: translateY(-2px); border-color: var(--color-accent-cyan); }
.lpk-card.is-busy { opacity: 0.6; }
.lpk-card__head { display: flex; gap: 12px; align-items: center; }
.lpk-portrait {
    flex-shrink: 0;
    border-radius: 12px;
    padding: 4px;
    background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.45));
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--color-text-muted);
}
.lpk-portrait--sm { padding: 1px; border-radius: 50%; vertical-align: middle; margin-right: 6px; }
.lpk-card__id { min-width: 0; display: grid; gap: 3px; }
.lpk-card__name { margin: 0; font-size: var(--text-sm); color: var(--color-text-bright); }
.btn-reset.lpk-card__pick { color: inherit; font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.btn-reset.lpk-card__pick:hover,
.btn-reset.lpk-card__pick:focus-visible { color: var(--color-accent-cyan); text-decoration: underline; }
.lpk-card__meta { color: var(--color-text-secondary); font-size: var(--text-xs); }
.lpk-situation { font-size: var(--text-xs); font-weight: 600; }
.lpk-situation--reserve { color: var(--color-accent-green); }
.lpk-situation--assigned { color: #ffb74d; }
.lpk-situation--here { color: var(--color-accent-cyan); }
.lpk-situation--locked { color: var(--color-text-muted); }
.lpk-chars { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin: 0; }
.lpk-char { padding: 4px 2px; text-align: center; border-radius: 5px; background: rgba(0, 0, 0, 0.3); }
.lpk-char dt { color: var(--color-text-muted); font-size: var(--text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lpk-char dd { margin: 0; color: var(--color-text-primary); font-family: var(--font-mono); font-weight: 700; font-size: var(--text-sm); }
.lpk-skills { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0; padding: 0; }
.lpk-skill {
    padding: 2px 6px;
    border-radius: 10px;
    background: rgba(180, 124, 255, 0.12);
    border: 1px solid rgba(180, 124, 255, 0.3);
    color: #d9c6ff;
    font-size: var(--text-xs);
}
.lpk-skill__lvl { font-family: var(--font-mono); font-weight: 700; }
.lpk-effects { font-size: var(--text-xs); border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 7px; }
.lpk-card__warn { color: #ffb74d; font-size: var(--text-xs); }
.lpk-table-wrap { overflow-x: auto; }
.lpk-table { width: 100%; border-collapse: collapse; font-size: var(--text-xs); }
.lpk-table th,
.lpk-table td { padding: 6px 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); text-align: left; vertical-align: middle; }
.lpk-table thead th { color: var(--color-text-muted); font-weight: 600; white-space: nowrap; }
.btn-reset.lpk-sort { color: inherit; font: inherit; cursor: pointer; }
.btn-reset.lpk-sort:hover { color: var(--color-accent-cyan); }
.lpk-table .lpk-row--reserve td,
.lpk-table .lpk-row--reserve th { background: rgba(0, 230, 118, 0.05); }
.lpk-table .lpk-row--assigned td,
.lpk-table .lpk-row--assigned th { background: rgba(255, 152, 0, 0.06); }
.lpk-row--locked { opacity: 0.55; }
.lpk-table .lpk-row__name,
.bdm-table tbody th {
    text-transform: none;
    letter-spacing: normal;
    font-size: var(--text-xs);
}
.lpk-table .lpk-row__name { color: var(--color-text-bright); font-weight: 700; white-space: nowrap; }
.lpk-table td.lpk-num { font-family: var(--font-mono); text-align: right; }
.lpk-row__effects { color: var(--color-text-secondary); min-width: 200px; }
.btn.lpk-recall { margin-right: auto; color: var(--color-accent-amber); }

/* ── Modale des politiques ── */
.ppk-intro { margin: 0 0 12px; color: var(--color-text-secondary); font-size: var(--text-xs); }
.ppk-footnote { margin-right: auto; color: var(--color-text-muted); font-size: var(--text-xs); }
.ppk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; }
/* Dans une modale, le corps défile (overflow: auto) et rognait l'anneau de
   sélection et le soulèvement au survol de la première rangée de cartes. */
.modal-body .ppk-grid { padding: 8px 6px 6px; }
.ppk-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 260px;
    padding: 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background-color: #070c16;
    background-size: cover;
    background-position: center top;
    color: var(--color-text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
/* Teintes de repli, tant que l'illustration de la politique manque. */
.ppk-card--economy { background-image: linear-gradient(180deg, rgba(255, 179, 0, 0.28), rgba(7, 12, 22, 0.95) 60%); }
.ppk-card--military { background-image: linear-gradient(180deg, rgba(255, 61, 90, 0.26), rgba(7, 12, 22, 0.95) 60%); }
.ppk-card--industry { background-image: linear-gradient(180deg, rgba(0, 229, 255, 0.24), rgba(7, 12, 22, 0.95) 60%); }
.ppk-card--growth { background-image: linear-gradient(180deg, rgba(0, 230, 118, 0.24), rgba(7, 12, 22, 0.95) 60%); }
.ppk-card--dark { background-image: linear-gradient(180deg, rgba(180, 124, 255, 0.26), rgba(7, 12, 22, 0.95) 60%); }
.ppk-card--harsh { background-image: linear-gradient(180deg, rgba(140, 20, 40, 0.42), rgba(7, 12, 22, 0.96) 60%); }
.ppk-card--neutral { background-image: linear-gradient(180deg, rgba(139, 153, 184, 0.2), rgba(7, 12, 22, 0.95) 60%); }
/* Illustration livrée : la moitié basse s'assombrit sous le texte. */
.ppk-card.has-art {
    background-image:
        linear-gradient(180deg, rgba(5, 10, 20, 0.15) 0%, rgba(5, 10, 20, 0.7) 40%, rgba(5, 10, 20, 0.96) 70%),
        var(--ppk-art);
}
.ppk-card:hover,
.ppk-card:focus-visible { border-color: rgba(0, 229, 255, 0.6); transform: translateY(-2px); }
.ppk-card.is-selected {
    border-color: var(--color-accent-cyan);
    box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.35), 0 0 18px rgba(0, 229, 255, 0.25);
}
.ppk-card__top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: auto; padding-top: 70px; }
.ppk-card__name { font-size: var(--text-sm); font-weight: 800; color: var(--color-text-bright); text-shadow: 0 1px 3px #000; margin-right: auto; }
.ppk-badge {
    padding: 1px 7px;
    border-radius: 10px;
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ppk-badge--current { background: rgba(0, 229, 255, 0.18); color: var(--color-accent-cyan); border: 1px solid rgba(0, 229, 255, 0.5); }
.ppk-badge--pending { background: rgba(255, 179, 0, 0.18); color: var(--color-accent-amber); border: 1px solid rgba(255, 179, 0, 0.5); }
.ppk-card__desc { color: var(--color-text-secondary); font-size: var(--text-xs); line-height: 1.4; }
.ppk-traits { display: flex; flex-wrap: wrap; gap: 4px; }
.ppk-trait {
    padding: 2px 7px;
    border-radius: 10px;
    font-size: var(--text-xs);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
}
.ppk-trait--good { color: var(--color-accent-green); border-color: rgba(0, 230, 118, 0.4); background: rgba(0, 230, 118, 0.1); }
.ppk-trait--bad { color: #ff8a9b; border-color: rgba(255, 61, 90, 0.4); background: rgba(255, 61, 90, 0.1); }
.ppk-system { display: grid; gap: 3px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.ppk-system__title { color: var(--color-text-muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; }
.ppk-system__list { display: grid; gap: 2px; }
.ppk-proj { display: flex; justify-content: space-between; gap: 8px; font-size: var(--text-xs); }
.ppk-proj__label { color: var(--color-text-secondary); }
.ppk-proj__value { font-family: var(--font-mono); white-space: nowrap; }
.ppk-proj__from { color: var(--color-text-muted); }
.ppk-up { color: var(--color-accent-green); }
.ppk-down { color: var(--color-accent-red); }

/* ── Modale de planification ── */
.cpg-intro { margin: 0 0 12px; color: var(--color-text-secondary); font-size: var(--text-xs); line-height: 1.45; }
.cpg-tab {
    flex: 1 1 110px;
    padding: 7px 10px;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: transparent;
    color: var(--color-text-secondary);
    font: inherit;
    font-size: var(--text-xs);
    cursor: pointer;
    white-space: nowrap;
}
.cpg-tab.is-active { border-color: rgba(34, 211, 238, 0.65); background: rgba(34, 211, 238, 0.12); color: var(--color-accent-cyan); font-weight: 700; }
.cpg-tab__count { margin-left: 6px; opacity: 0.7; font-family: var(--font-mono); }
.cpg-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.cpg-search { flex: 1 1 240px; min-width: 0; }
.cpg-obsolete { display: flex; align-items: center; gap: 6px; color: var(--color-accent-amber); font-size: var(--text-xs); cursor: pointer; white-space: nowrap; }
.cpg-obsolete.is-disabled { color: #5a687d; cursor: default; }
.cpg-warning {
    margin: 0 0 12px;
    padding: 8px 10px;
    border-radius: 7px;
    border: 1px solid rgba(251, 191, 36, 0.4);
    background: rgba(120, 53, 15, 0.14);
    color: var(--color-accent-amber);
    font-size: var(--text-xs);
}
.cpg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 10px; }
.cpg-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding: 11px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.24);
    color: var(--color-text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.cpg-card:hover,
.cpg-card:focus-visible { border-color: rgba(34, 211, 238, 0.45); }
.cpg-card.is-selected { border-color: rgba(34, 211, 238, 0.8); background: rgba(34, 211, 238, 0.1); box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.4); }
.cpg-card.is-obsolete { opacity: 0.7; }
.cpg-card--none { justify-content: center; border-style: dashed; }
.cpg-card__head { display: flex; gap: 8px; align-items: flex-start; }
.cpg-card__id { flex: 1; min-width: 0; display: grid; gap: 2px; }
.cpg-card__name { font-weight: 700; font-size: 12px; color: var(--color-text-primary); }
.cpg-card__meta { color: var(--color-text-muted); font-size: var(--text-xs); }
.cpg-badge {
    flex-shrink: 0;
    align-self: flex-start;
    padding: 1px 6px;
    border-radius: 10px;
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-accent-cyan);
    border: 1px solid rgba(0, 229, 255, 0.5);
}
.cpg-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; color: var(--color-text-secondary); font-size: var(--text-xs); }
.cpg-stats b { color: var(--color-text-primary); }
.cpg-stats__wide { grid-column: 1 / -1; color: var(--color-text-muted); }
.cpg-empty { padding: 25px; text-align: center; color: var(--color-text-muted); }

/* ── Budget du système : jauges réglables ── */
.sbg-status { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--color-text-secondary); }
.sbg-stack {
    display: flex;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.06);
    margin-bottom: 12px;
}
.sbg-stack__seg { height: 100%; transition: width 0.15s ease; }
.sbg-stack__seg--tech { background: var(--color-accent-green); }
.sbg-stack__seg--intel { background: var(--color-accent-purple); }
.sbg-stack__seg--counter { background: var(--color-accent-cyan); }
/* La largeur qui compte est celle de l'encart, pas celle de l'écran : dans
   une fiche serrée à côté de la liste (tablette), une ligne de budget
   complète (≈ 470 px) débordait alors que l'écran faisait 900 px. */
.sbg-rows { display: grid; gap: 10px; container-type: inline-size; }
.sbg-row {
    display: grid;
    grid-template-columns: 28px minmax(110px, 150px) minmax(120px, 1fr) auto minmax(90px, auto);
    align-items: center;
    gap: 10px;
    font-size: var(--text-xs);
}
.sbg-row--tech { --gauge-color: var(--color-accent-green); }
.sbg-row--intel { --gauge-color: var(--color-accent-purple); }
.sbg-row--counter { --gauge-color: var(--color-accent-cyan); }
.sbg-row__icon { color: var(--gauge-color); }
.sbg-row__label { color: var(--color-text-primary); font-weight: 600; }
.sbg-gauge {
    position: relative;
    height: 18px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid color-mix(in srgb, var(--gauge-color) 40%, transparent);
    overflow: hidden;
}
/* Au-delà du plafond : la part déjà prise par les deux autres budgets. */
.sbg-gauge__cap {
    position: absolute;
    inset: 0 0 0 var(--cap);
    background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0 4px, transparent 4px 8px);
}
.sbg-gauge__fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--fill);
    background: linear-gradient(90deg, color-mix(in srgb, var(--gauge-color) 45%, transparent), var(--gauge-color));
    transition: width 0.1s ease;
}
.sbg-gauge input[type="range"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
}
.sbg-gauge:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--gauge-color) 60%, transparent); }
.sbg-gauge input[type="range"]:disabled { cursor: default; }
.sbg-row__pct { display: inline-flex; align-items: center; gap: 3px; color: var(--color-text-secondary); }
.sbg-row__input {
    width: 52px;
    padding: 3px 5px;
    border-radius: 4px;
    border: 1px solid color-mix(in srgb, var(--gauge-color) 40%, transparent);
    background: rgba(4, 10, 20, 0.8);
    color: var(--gauge-color);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-align: right;
}
.sbg-row__amount { font-family: var(--font-mono); color: var(--color-text-primary); text-align: right; white-space: nowrap; }
.sbg-row__amount.is-changed { color: var(--color-accent-amber); }
.sbg-summary {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 16px;
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
}
@container (max-width: 480px) {
    .sbg-row { grid-template-columns: 24px 1fr auto; }
    .sbg-gauge { grid-column: 1 / -1; grid-row: 2; }
    .sbg-row__amount { grid-column: 1 / -1; text-align: left; }
}

/* ── Onglet Marchandises : en-tête de carte ── */
.sgd-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 6px 10px; }
.sgd-name {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 110px;
    min-width: 0;
    color: var(--color-text-primary);
    font-size: var(--text-sm);
    font-weight: 600;
}
.sgd-name__text { min-width: 0; overflow-wrap: anywhere; }
.sgd-stock { display: grid; justify-items: end; margin-left: auto; text-align: right; line-height: 1.3; }
.sgd-stock__value { color: var(--color-accent-cyan); font-family: var(--font-mono); font-weight: 700; white-space: nowrap; }
.sgd-stock__label { margin-right: 5px; color: var(--color-text-secondary); font-family: var(--font-sans, inherit); font-size: var(--text-xs); font-weight: 500; }
.sgd-stock__rate { color: var(--color-text-secondary); font-family: var(--font-mono); font-size: var(--text-xs); white-space: nowrap; }
.sgd-stock__rate.is-up { color: var(--color-accent-green); }

/* ── Onglet Bâtiments : cartes ouvrant la fiche ── */
.sbd-card {
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.sbd-card:hover,
.sbd-card:focus-within { border-color: rgba(0, 230, 118, 0.55); background: rgba(0, 230, 118, 0.05); }
.sbd-card__head { display: flex; align-items: center; gap: 8px; }
.sbd-card__name { font-size: var(--text-sm); color: var(--color-text-primary); min-width: 0; }
.btn-reset.sbd-card__open { color: inherit; font: inherit; text-align: left; cursor: pointer; }
.btn-reset.sbd-card__open:hover,
.btn-reset.sbd-card__open:focus-visible { color: var(--color-accent-green); text-decoration: underline; }

/* ── Fiche d'un bâtiment ── */
.bdm-title { display: inline-flex; align-items: center; gap: 10px; }
.bdm-title__meta { display: block; color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 500; }
.bdm-summary {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
    gap: 8px;
    margin-bottom: 14px;
}
.bdm-summary > div {
    display: grid;
    gap: 2px;
    padding: 8px 10px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}
.bdm-summary strong { color: var(--color-text-primary); font-family: var(--font-mono); font-size: var(--text-sm); }
.bdm-section { margin-top: 12px; }
.bdm-section h4 { margin: 0 0 6px; color: var(--color-text-primary); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; }
.bdm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: var(--text-xs); }
.bdm-list li { display: flex; justify-content: space-between; gap: 10px; color: var(--color-text-secondary); }
.bdm-list strong { color: var(--color-text-primary); font-family: var(--font-mono); }
.bdm-table { width: 100%; border-collapse: collapse; font-size: var(--text-xs); }
.bdm-table th,
.bdm-table td { padding: 6px 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); text-align: left; vertical-align: top; }
.bdm-table thead th { color: var(--color-text-muted); font-weight: 600; }
.bdm-table tbody th { color: var(--color-text-primary); }
.bdm-table td.bdm-num { font-family: var(--font-mono); text-align: right; }
.bdm-table th.bdm-num { text-align: right; }

/* ── Onglet Ordres ── */
.sor-empty,
.sor-intro { color: var(--color-text-secondary); font-size: var(--text-sm); }
.sor-empty { text-align: center; padding: 24px 0; }
.sor-intro { margin: 0 0 10px; font-size: var(--text-xs); }
.sor-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sor-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 6px 12px;
    align-items: center;
}
.sor-item.is-failed { --ovs-accent: var(--color-accent-red); }
.sor-item__icon { flex-shrink: 0; }
.sor-item__main { display: grid; gap: 3px; min-width: 0; }
.sor-item__type { color: var(--color-accent-cyan); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.sor-item__text { color: var(--color-text-primary); font-size: var(--text-sm); line-height: 1.4; overflow-wrap: anywhere; }
.sor-item__error { color: var(--color-accent-red); font-size: var(--text-xs); }
.sor-item__actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.btn.sor-btn { font-size: var(--text-xs); padding: 3px 9px; color: var(--color-accent-cyan); border: 1px solid rgba(0, 229, 255, 0.3); }
.btn.sor-btn--danger { color: var(--color-accent-red); border-color: rgba(255, 61, 90, 0.35); }
.sor-item__editor { grid-column: 1 / -1; }
@container sheet (max-width: 600px) {
    .sor-item { grid-template-columns: 1fr; }
    .sor-item__actions { justify-content: flex-start; }
    .lpk-views { margin-left: 0; }
}

/* ── Caractéristiques : tuiles de jeu ── */
.sch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
    gap: 10px;
}
.sch-tile {
    --sch-accent: var(--color-accent-amber);
    --ovs-accent: var(--sch-accent);
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.sch-tile--stab { --sch-accent: var(--color-accent-green); grid-column: span 2; }
.sch-tile--stab.is-warn { --sch-accent: var(--color-accent-amber); }
.sch-tile--stab.is-danger { --sch-accent: var(--color-accent-red); }
.sch-tile--policy { --sch-accent: var(--color-accent-purple); }
.sch-tile--pc { --sch-accent: var(--color-accent-cyan); }
.sch-tile--revolt { --sch-accent: var(--color-accent-green); }
.sch-tile--revolt.is-danger { --sch-accent: var(--color-accent-red); }
.sch-tile--terra { --sch-accent: #4fc3f7; }
.sch-tile--plan { --sch-accent: var(--color-accent-amber); }
.sch-tile--plan.is-locked { --sch-accent: var(--color-text-muted); }
.sch-tile--occupants { --sch-accent: var(--color-accent-amber); }
/* Politique : son illustration en fond (famille `policyart`), voilée. */
.ovs.sch-tile--policy.has-art {
    background:
        linear-gradient(180deg, rgba(5, 10, 20, 0.2), rgba(5, 10, 20, 0.7) 45%, rgba(5, 10, 20, 0.94) 80%),
        var(--sch-art) center top / cover;
}
.sch-tile__head { display: flex; align-items: center; gap: 8px; }
.sch-tile__value {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    color: var(--color-text-bright);
    font-family: var(--font-mono);
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.1;
    text-shadow: 0 0 14px color-mix(in srgb, var(--sch-accent) 45%, transparent);
}
.sch-tile__unit { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 500; text-shadow: none; }
.sch-tile__name { color: var(--color-text-bright); font-size: var(--text-sm); font-weight: 800; }
.sch-locked { display: inline-flex; align-items: center; gap: 6px; color: var(--color-text-muted); }
.sch-chip {
    align-self: center;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: var(--text-xs);
    font-weight: 700;
    text-shadow: none;
}
.sch-chip--up { color: var(--color-accent-green); background: rgba(0, 230, 118, 0.12); border: 1px solid rgba(0, 230, 118, 0.4); }
.sch-chip--down { color: #ff8a9b; background: rgba(255, 61, 90, 0.12); border: 1px solid rgba(255, 61, 90, 0.4); }
.sch-meter {
    width: 100%;
    height: 10px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.08);
    border: 0;
}
.sch-meter::-webkit-meter-bar { background: rgba(255, 255, 255, 0.08); border: 0; border-radius: 5px; height: 10px; }
.sch-meter::-webkit-meter-optimum-value { background: linear-gradient(90deg, rgba(0, 230, 118, 0.45), var(--color-accent-green)); border-radius: 5px; }
.sch-meter::-webkit-meter-suboptimum-value { background: linear-gradient(90deg, rgba(255, 179, 0, 0.45), var(--color-accent-amber)); border-radius: 5px; }
.sch-meter::-webkit-meter-even-less-good-value { background: linear-gradient(90deg, rgba(255, 61, 90, 0.45), var(--color-accent-red)); border-radius: 5px; }
.sch-meter:-moz-meter-optimum::-moz-meter-bar { background: var(--color-accent-green); }
.sch-meter:-moz-meter-sub-optimum::-moz-meter-bar { background: var(--color-accent-amber); }
.sch-meter:-moz-meter-sub-sub-optimum::-moz-meter-bar { background: var(--color-accent-red); }
.sch-mods { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0; padding: 0; }
.sch-mod {
    padding: 2px 7px;
    border-radius: 10px;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.sch-mod strong { font-family: var(--font-mono); color: var(--color-text-primary); }
.sch-mod--up strong { color: var(--color-accent-green); }
.sch-mod--down strong { color: #ff8a9b; }
.sch-note { margin: 0; color: var(--color-text-muted); font-size: var(--text-xs); line-height: 1.4; }
.sch-pending { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--color-accent-amber); font-size: var(--text-xs); }
.btn.sch-action { align-self: flex-start; margin-top: auto; }
.sch-occupants { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; color: var(--color-text-primary); font-size: var(--text-xs); }
@container sheet (max-width: 600px) {
    .sch-tile--stab { grid-column: auto; }
}

/* =========================================================
   Vue d'ensemble — gabarit commun (2026-10-02)
   Tous les encarts passent par OverviewPanel (.ovp : en-tête illustré,
   icône, titre, action) et tous leurs blocs intérieurs par la surface .ovs
   (liseré lumineux à gauche, halo d'accent). Une seule couleur d'accent par
   encart, reprise par ses surfaces sauf quand un bloc a la sienne (race,
   état de stabilité, partie des ressources).
   ========================================================= */
.ovp {
    --ovp-accent: var(--color-accent-cyan);
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--ovp-accent) 26%, transparent);
    background: linear-gradient(180deg, rgba(12, 18, 34, 0.92), rgba(5, 8, 16, 0.95));
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    overflow: hidden;
}
.ovp--cyan { --ovp-accent: var(--color-accent-cyan); }
.ovp--purple { --ovp-accent: var(--color-accent-purple); }
.ovp--green { --ovp-accent: var(--color-accent-green); }
.ovp--amber { --ovp-accent: var(--color-accent-amber); }
.ovp--wide { grid-column: 1 / -1; }

.ovp__head {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    min-height: 52px;
    padding: 10px 14px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--ovp-accent) 16%, transparent), transparent 75%);
    background-size: cover;
}
/* Bandeau illustré (famille `panel`) : sujet à droite, voile sous le titre. */
.ovp__head.has-art {
    min-height: 64px;
    background:
        linear-gradient(90deg, rgba(5, 10, 20, 0.92) 0%, rgba(5, 10, 20, 0.72) 45%, rgba(5, 10, 20, 0.2) 100%),
        var(--ovp-art) right center / cover;
}
/* Filet lumineux sous l'en-tête, à la couleur de l'encart. */
.ovp__head::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--ovp-accent), color-mix(in srgb, var(--ovp-accent) 25%, transparent) 60%, transparent);
}
.ovp__icon {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--ovp-accent);
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ovp-accent) 55%, transparent));
}
.ovp__title {
    margin: 0;
    color: var(--color-text-bright);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-shadow: 0 0 12px color-mix(in srgb, var(--ovp-accent) 45%, transparent);
}
.ovp__action {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-left: auto;
}
.ovp__figure {
    color: var(--color-text-bright);
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 700;
}
.ovp__figure small { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 500; }
.ovp__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
}
.ovp__note { margin: 0; color: var(--color-text-muted); font-size: var(--text-xs); line-height: 1.4; }

/* Surface commune des blocs intérieurs. */
.ovs {
    --ovs-accent: var(--ovp-accent, var(--color-accent-cyan));
    position: relative;
    min-width: 0;
    padding: 11px 12px 11px 15px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--ovs-accent) 22%, rgba(255, 255, 255, 0.06));
    background:
        radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--ovs-accent) 12%, transparent), transparent 60%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.32));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.ovs::before {
    content: '';
    position: absolute;
    inset: 10px auto 10px 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--ovs-accent);
    box-shadow: 0 0 10px var(--ovs-accent);
    pointer-events: none;
}
/* Titre de bloc : le même partout (parties des ressources, tuiles…). */
.ovs__title,
.sch-tile__label {
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.ovs__title { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ovs__title .game-icon,
.sch-icon { color: var(--ovs-accent); flex-shrink: 0; }

/* Chaque civilisation porte sa couleur sur sa surface. */
.ovs.sov-pop { --ovs-accent: var(--race-color, var(--color-accent-cyan)); gap: 6px; }
.sov-pops { gap: 8px; }
.ovs.lpost__empty { line-height: 1.5; }
.sov-pop__race { font-size: var(--text-sm); }
/* Pied de l'encart Populations, calé en bas pour aligner les deux colonnes. */
.ovs.sov-capacity { margin-top: auto; display: grid; gap: 7px; }
.sov-capacity .ovs__title { margin-bottom: 0; }
.sov-capacity__value { margin-left: auto; color: var(--color-text-bright); font-family: var(--font-mono); letter-spacing: 0; }
.sch-tile__value { font-size: 1.6rem; }

/* =========================================================
   Onglets du système — même gabarit que la vue d'ensemble (2026-10-03)
   Chaque onglet est un OverviewPanel ; ses cartes et blocs, des surfaces .ovs.
   ========================================================= */

/* Grilles de cartes. */
.ovs-grid { display: grid; gap: 12px; }
.ovs-grid--goods { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.ovs-grid--buildings { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.ovs-grid--planets { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }

/* Image de l'objet en fond de carte (cardArt) : l'icône en filigrane, ou la
   version grand format (familles goodart, buildingart…) côté droit. */
.has-card-art { overflow: hidden; }
.has-card-art > * { position: relative; z-index: 1; }
.has-card-art::after {
    content: '';
    position: absolute;
    z-index: 0;
    top: -12px;
    right: -12px;
    width: 128px;
    height: 128px;
    background: var(--card-art) center / contain no-repeat;
    opacity: 0.16;
    pointer-events: none;
}
.has-card-art--large::after {
    top: 50%;
    right: -18px;
    width: min(60%, 220px);
    height: auto;
    aspect-ratio: 1;
    transform: translateY(-50%);
    opacity: 0.32;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
}

/* Bilan énergétique en tête des onglets. */
.ovs.ovs-energy { --ovs-accent: var(--color-accent-cyan); }
.ovs-energy .sov-band__rows { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 6px 18px; }

/* Choix d'affichage et filtres dans l'en-tête ou en tête de corps. */
.ovp-views {
    display: inline-flex;
    border: 1px solid color-mix(in srgb, var(--ovp-accent) 40%, transparent);
    border-radius: 6px;
    overflow: hidden;
}
.ovp-view {
    padding: 4px 11px;
    border: 0;
    background: transparent;
    color: var(--color-text-secondary);
    font: inherit;
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
}
.ovp-view.is-active { background: color-mix(in srgb, var(--ovp-accent) 18%, transparent); color: var(--ovp-accent); }
.ovp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ovp-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.03);
    color: var(--color-text-secondary);
    font: inherit;
    font-size: var(--text-xs);
    cursor: pointer;
}
.ovp-chip.is-active {
    border-color: color-mix(in srgb, var(--ovp-accent) 60%, transparent);
    background: color-mix(in srgb, var(--ovp-accent) 14%, transparent);
    color: var(--color-text-bright);
}
.ovp-chip__count { font-family: var(--font-mono); color: var(--color-text-muted); }

/* Marchandises : le liseré dit si l'effet de la marchandise est actif. */
.ovs.sgd-card { --ovs-accent: var(--color-accent-cyan); }
.ovs.sgd-card.is-full { --ovs-accent: var(--color-accent-green); }
.ovs.sgd-card.is-partial { --ovs-accent: var(--color-accent-amber); }
.ovs.sgd-card.is-off { --ovs-accent: var(--color-text-muted); }
.ovs.sgd-outlook {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 18px;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}

/* Bâtiments. */
.ovs.sbd-card { --ovs-accent: var(--color-accent-green); }
.ovs.sbd-card.is-partial { --ovs-accent: var(--color-accent-amber); }
.ovs.sbd-card:hover,
.ovs.sbd-card:focus-within { transform: translateY(-2px); border-color: color-mix(in srgb, var(--ovs-accent) 55%, transparent); }

/* Constructions : le liseré dit l'état de la ligne de file. */
.scn-needs__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 12px;
    margin-bottom: 8px;
}
.scn-needs__head .ovs__title { margin-bottom: 0; }
.ovs.scn-row { --ovs-accent: var(--color-accent-cyan); }
.ovs.scn-row.is-new { --ovs-accent: var(--color-accent-green); }
.ovs.scn-row.is-blocked { --ovs-accent: var(--color-accent-amber); }
.ovs.scn-row.is-destroy { --ovs-accent: var(--color-accent-red); }
.ovs.scn-row.is-draggable { cursor: grab; }
.ovs.scn-row.is-dragged { cursor: grabbing; opacity: 0.45; }
.scn-cost { display: inline-flex; align-items: center; gap: 5px; }

/* Planètes. */
.ovs.pblk { --ovs-accent: var(--color-text-muted); padding: 14px 16px 14px 18px; }
.ovs.pblk.is-mine { --ovs-accent: var(--color-accent-cyan); }

/* Flottes en orbite. */
.ovs.sfl-section { --ovs-accent: var(--color-accent-cyan); }
.ovs.sfl-section--foreign { --ovs-accent: var(--color-accent-amber); }

/* Évènements : carte partagée avec la page Évènements (EventCard). */
.evc-card { margin-bottom: 0.75rem; }
.evc__body { display: flex; align-items: flex-start; gap: 0.75rem; }
.evc__main { flex: 1; min-width: 0; }
.evc__icon { flex-shrink: 0; }
.evc__head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; }
.evc__message { margin: 0; color: var(--color-text, var(--color-text-primary)); font-size: 0.95rem; white-space: pre-line; overflow-wrap: anywhere; }
.evc__planets { margin: 6px 0 0; padding-left: 18px; color: var(--color-text-muted, var(--color-text-secondary)); font-size: 0.82rem; }
.evc__combats { margin-top: 10px; padding-left: 10px; border-left: 2px solid rgba(0, 229, 255, 0.3); }
.evc__combat { margin-bottom: 15px; }
.evc__combat-title { color: var(--color-text-bright); font-size: 0.9rem; font-weight: 600; }
.evc__combat-text { margin: 4px 0; color: var(--color-text-muted, var(--color-text-secondary)); font-size: 0.85rem; }
.evc__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.evt-turn { display: grid; gap: 8px; }
.evt-turn__label {
    color: var(--color-text-label);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.ovs.evc { --ovs-accent: var(--color-accent-cyan); }
.ovs.evc--military { --ovs-accent: var(--color-accent-red); }
.ovs.evc--commerce,
.ovs.evc--donations,
.ovs.evc--heroes { --ovs-accent: var(--color-accent-amber); }
.ovs.evc--renseignement { --ovs-accent: var(--color-accent-purple); }
.ovs.evc--technology { --ovs-accent: var(--color-accent-green); }

/* Ordres. */
@container sheet (max-width: 600px) {
    .sor-item { grid-template-columns: auto minmax(0, 1fr); }
    .sor-item__actions { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ── En-tête du système : renommer, planètes possédées ── */
.sys-ctrl-rename {
    display: inline-flex;
    align-items: center;
    padding: 2px;
    border-radius: 4px;
    color: var(--color-accent-purple);
    cursor: pointer;
}
.sys-ctrl-rename:hover,
.sys-ctrl-rename:focus-visible { background: rgba(180, 124, 255, 0.15); }
.sys-ctrl-planets {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 1px 7px;
    border-radius: 4px;
    border: 1px solid rgba(0, 229, 255, 0.35);
    background: rgba(0, 229, 255, 0.08);
    color: var(--color-accent-cyan);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 600;
}
.sys-ctrl-planets__label { font-family: var(--font-primary); font-weight: 400; color: var(--color-text-secondary); }

/* ── Infobulle de jeu (survol ou focus) ── */
/* La bulle des mines déborde de sa partie : rien à rogner (le fond suit
   déjà l'arrondi de la bordure). */
.ovs.sov-band--mines { overflow: visible; }
.sov-tip {
    position: relative;
    cursor: help;
    border-bottom: 1px dotted currentColor;
    outline: none;
}
.sov-tip:focus-visible { box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.5); border-radius: 3px; }
.sov-tip__bubble {
    position: absolute;
    z-index: 30;
    right: 0;
    top: calc(100% + 8px);
    width: max-content;
    max-width: min(300px, 80vw);
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid rgba(0, 229, 255, 0.35);
    background: rgba(6, 11, 22, 0.97);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
    color: var(--color-text-primary);
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    font-weight: 400;
    line-height: 1.45;
    text-align: left;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s;
    pointer-events: none;
}
.sov-tip:hover .sov-tip__bubble,
.sov-tip:focus .sov-tip__bubble { opacity: 1; visibility: visible; transform: none; }
.sov-tip__list { display: grid; gap: 2px; margin-top: 5px; }
.sov-tip__list strong { font-family: var(--font-mono); color: var(--color-accent-amber); }

/* ── Budget : alerte brève quand la somme dépasserait 100 % ── */
.sbg-limit {
    min-height: 1.2em;
    margin: 8px 0 0;
    color: var(--color-accent-amber);
    font-size: var(--text-xs);
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.sbg-limit.is-visible { opacity: 1; }

/* ── Gestion globale : onglets et politiques ── */
.gsm-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.gsm-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px 5px 7px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.02);
    color: var(--color-text-secondary);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.gsm-tab:hover { border-color: rgba(0, 229, 255, 0.35); color: var(--color-text-primary); }
.gsm-tab.is-active {
    border-color: rgba(0, 229, 255, 0.55);
    background: linear-gradient(180deg, rgba(0, 229, 255, 0.16), rgba(0, 229, 255, 0.05));
    color: var(--color-accent-cyan);
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.15);
}
.gsm-tab__icon { flex: 0 0 auto; opacity: 0.75; }
.gsm-tab.is-active .gsm-tab__icon,
.gsm-tab:hover .gsm-tab__icon { opacity: 1; }
.gsm-label { margin-bottom: 8px; color: var(--color-accent-cyan); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; }

.ppk-grid--compact { grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 10px; }
.ppk-card--compact { min-height: 190px; padding: 11px; gap: 6px; }
.ppk-card--compact .ppk-card__top { padding-top: 46px; }
.ppk-card--compact .ppk-card__desc {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ppk-inforce {
    padding-top: 5px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--color-accent-cyan);
    font-size: var(--text-xs);
}

/* ── Formulaire de construction : précision au-dessus du catalogue ── */
.cpm-note {
    margin: 0 0 10px;
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
}

/* Vues « Tableau » des onglets Marchandises et Bâtiments du bloc système :
   même rendu que le tableau des planètes (PlanetTable). En-tête figé, et
   colonne du nom figée quand le tableau défile horizontalement ; son fond est
   opaque (les autres colonnes passent dessous) et ses filets passent par
   box-shadow, que `border-collapse` ne rattache pas au tableau. */
.sys-tbl-frame { overflow-x: auto; border: 1px solid rgba(0, 229, 255, 0.18); border-radius: 8px; background: rgba(0, 0, 0, 0.25); }
.sys-tbl { width: 100%; min-width: 640px; border-collapse: collapse; }
.sys-tbl.is-wide { min-width: 900px; }
.sys-tbl th,
.sys-tbl td { padding: 7px 9px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); font-size: var(--text-xs); vertical-align: middle; }
.sys-tbl th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: rgba(10, 10, 25, 0.97);
    border-bottom-color: rgba(0, 229, 255, 0.25);
    color: var(--color-accent-cyan);
    letter-spacing: 0.06em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}
.sys-tbl td.sys-tbl__name {
    position: sticky;
    left: 0;
    z-index: 1;
    background: #0a0a19;
    box-shadow: inset -1px 0 0 rgba(0, 229, 255, 0.18), inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}
.sys-tbl th.sys-tbl__name {
    left: 0;
    z-index: 3;
    background: #0a0a19;
    box-shadow: inset -1px 0 0 rgba(0, 229, 255, 0.18), inset 0 -1px 0 rgba(0, 229, 255, 0.25);
}
.sys-tbl .sys-tbl__num { font-family: var(--font-mono); text-align: right; white-space: nowrap; }
.sys-tbl th.sys-tbl__num,
.sys-tbl th.sys-tbl__end { font-family: inherit; text-align: right; }
.sys-tbl__label { display: inline-flex; align-items: center; gap: 7px; color: var(--color-text-primary); font-weight: 600; white-space: nowrap; }
.btn-reset.sys-tbl__label { font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.btn-reset.sys-tbl__label:hover,
.btn-reset.sys-tbl__label:focus-visible { color: var(--color-accent-green); text-decoration: underline; }
.sys-tbl__actions { display: flex; justify-content: flex-end; gap: 5px; }
.sys-tbl__stack { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.sys-tbl__nowrap { white-space: nowrap; }
.sys-tbl .sys-tbl__planets { min-width: 180px; }
.sys-tbl__inline { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.sys-tbl__note { display: block; margin-top: 2px; font-weight: 400; }
.sys-tbl .is-muted { color: var(--color-text-secondary); }
.sys-tbl .is-label { color: var(--color-text-label); }
.sys-tbl .is-primary { color: var(--color-text-primary); }
.sys-tbl .is-green { color: var(--color-accent-green); }
.sys-tbl .is-amber { color: var(--color-accent-amber); }
.sys-tbl .is-red { color: var(--color-accent-red); }
.sys-tbl .is-cyan { color: var(--color-accent-cyan); }
.sys-tbl .is-purple { color: var(--color-accent-purple); }
.sys-tbl .is-strong { font-weight: 700; }

/* Réglage de consommation d'une marchandise (carte et tableau). */
.sgd-conso-input {
    width: 64px;
    padding: 3px 5px;
    border: 1px solid rgba(34, 211, 238, 0.25);
    border-radius: 4px;
    background: rgba(4, 10, 20, 0.8);
    color: var(--color-accent-amber);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
}
.sgd-conso-input.is-full { color: var(--color-accent-green); }
.sys-tbl .sgd-conso-input { width: 60px; }
.sgd-auto { display: flex; align-items: center; gap: 5px; color: var(--color-text-secondary); font-size: var(--text-xs); white-space: nowrap; cursor: pointer; }