/* Shell partagé dans app-shell.css.
   
   Il y avait ici une règle sur `#main-tabs` — 52px de marge à gauche pour
   dégager le rond de l'intersite-navbar, et un centrage — datant du temps où
   cette page portait une nav nue, sans barre au-dessus. `#main-tabs` est
   maintenant glissé dans `<pr-site-header>`, qui gère son propre dégagement :
   la règle ne corrigeait plus rien, elle décalait la barre de 147px et la
   centrait, sur les trois pages qui chargent cette feuille (paramètres,
   dotation, création de pays) et sur elles seules. La barre avait donc l'air
   différente exactement là.

   **Une feuille de page ne restyle pas le contenu glissé dans un composant
   partagé.** C'est de l'action à distance : le défaut se voit sur une page et
   se corrige dans le fichier d'une autre. */
.mobile-menu-toggle { margin-bottom: var(--sp-3); }

.settings-page {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    gap: var(--sp-5);
    /* Une valeur longue (URL de drapeau, nom de région) ne doit jamais
       élargir la grille : sans ça la page déborde et le téléphone offre un
       défilement horizontal sur toute la hauteur. */
    min-width: 0;
}
.settings-page > * { min-width: 0; }
/* Page navigation now lives in the shared top tab bar
   (partials/main_nav.html, base.css .tab-group/.tab-dropdown). */
.settings-grid {
    display: grid;
    gap: var(--sp-4);
}
.settings-form {
    display: grid;
    gap: var(--sp-3);
}
.settings-field {
    display: grid;
    gap: var(--sp-1);
}
.settings-field label {
    font-size: 0.85rem;
    color: var(--text-muted);
}
.settings-field input, .settings-field select {
    width: 100%;
    height: 40px;
    padding: 0 var(--sp-3);
    border-radius: var(--r-sm);
    border: 1px solid var(--border-mid);
    background: var(--bg-surface);
    color: var(--text-primary);
}
.settings-field input:focus, .settings-field select:focus {
    outline: none;
    border-color: var(--border-gold);
}
.code-box {
    padding: var(--sp-3);
    border: 1px solid var(--border-mid);
    border-radius: var(--r-md);
    background: var(--bg-overlay);
    color: var(--text-primary);
    display: none;
}
.empty-note {
    color: var(--text-muted);
    font-size: 0.9rem;
}
.region-dropdown {
    position: relative;
}
.region-dropdown-toggle {
    width: 100%;
    height: 40px;
    padding: 0 var(--sp-3);
    border-radius: var(--r-sm);
    border: 1px solid var(--border-mid);
    background: var(--bg-surface);
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
}
.region-dropdown-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-raised);
    border: 1px solid var(--border-mid);
    border-radius: var(--r-sm);
    max-height: 220px;
    overflow-y: auto;
    z-index: 100;
    margin-top: 4px;
}
.region-dropdown-list.open {
    display: block;
}
.region-dropdown-search {
    width: calc(100% - 16px);
    margin: 8px;
    padding: var(--sp-2);
    background: var(--bg-base);
    border: 1px solid var(--border-mid);
    border-radius: var(--r-sm);
    color: var(--text-primary);
    font-size: 0.85rem;
}
.region-dropdown-item {
    padding: var(--sp-2) var(--sp-3);
    cursor: pointer;
}
.region-dropdown-item:hover {
    background: var(--bg-surface);
}
.region-dropdown-item.active {
    color: var(--gold);
}
.flag-upload-box {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}
.flag-upload-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}
.flag-dropzone {
    border: 2px dashed var(--border-mid);
    border-radius: var(--r-md);
    padding: var(--sp-3);
    transition: border-color 0.15s ease, background 0.15s ease;
}
.flag-dropzone.dragover {
    border-color: var(--border-gold);
    background: var(--gold-subtle);
}
.flag-dropzone-hint {
    margin-top: var(--sp-2);
    font-size: 0.8rem;
    color: var(--text-muted);
    text-align: center;
    pointer-events: none;
}
.flag-dropzone.dragover .flag-dropzone-hint {
    color: var(--gold);
}
.flag-preview {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: var(--r-sm);
    background: var(--bg-raised);
    border: 1px solid var(--border-mid);
}
.flag-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-sm);
    border: 1px solid var(--border-mid);
    background: var(--bg-surface);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.85rem;
}
.flag-upload-btn:hover {
    border-color: var(--border-gold);
    color: var(--gold);
}
.flag-upload-tabs {
    display: flex;
    gap: var(--sp-2);
}
.flag-upload-tab {
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--r-sm);
    border: 1px solid var(--border-mid);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.8rem;
}
.flag-upload-tab.active {
    background: var(--gold-subtle);
    border-color: var(--border-gold);
    color: var(--gold);
}

/* ══ Paramètres pays — quatre blocs (Identité · Capitale & monnaie ·
   Doctrines · Gouvernement) au lieu d'une seule carte fourre-tout.
   Un bouton d'enregistrement par bloc, calé sur un endpoint : nom,
   capitale/monnaie, doctrines, slot. ═══════════════════════════════ */

/* La page pays est plus large que les autres écrans de réglages : quatre
   blocs sur deux colonnes tenaient à l'étroit dans la largeur par défaut,
   et le reste du dashboard est pleine largeur (app-shell.css). */
.settings-page-country { max-width: 1440px; }
.settings-page-account { max-width: 1440px; }
/* L'en-tête du bloc .cset/.aset remplace le titre générique de la page. */
.settings-page-country .dashboard-header { display: none; }
.settings-page-account .dashboard-header { display: none; }

.cset {
    background: var(--bg-base);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-lg);
    overflow: hidden;
}

/* ── En-tête ─────────────────────────────────────────────────── */
.cset-head {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--border-subtle);
}
.cset-head-flag {
    width: 52px;
    height: 52px;
    flex: none;
    object-fit: cover;
    border-radius: var(--r-sm);
    background: var(--bg-surface);
    border: 1px solid var(--border-gold);
}
.cset-head-flag-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    color: var(--text-faint);
}
.cset-head-id { flex: 1; min-width: 0; }
.cset-eyebrow {
    font-size: 0.69rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.cset-title {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--gold);
    line-height: 1.2;
}
.cset-head-meta {
    display: flex;
    gap: var(--sp-5);
    text-align: right;
}
.cset-head-meta dt { font-size: 0.66rem; color: var(--text-faint); }
.cset-head-meta dd { font-size: 0.81rem; color: var(--text-secondary); }
.cset-num { font-variant-numeric: tabular-nums; }

/* ── Grille de blocs ─────────────────────────────────────────── */
/* Le fond du conteneur EST la ligne de séparation : un gap de 1px suffit,
   pas de bordure par bloc à désactiver aux extrémités. */
/* Mobile d'abord : UNE colonne par défaut, la seconde n'arrive qu'à partir
   de 900px — deux blocs de formulaire lisibles, c'est 2x420px plus les
   marges. Écrit dans ce sens, la règle par défaut est celle qui est sûre :
   un palier manquant ou une feuille servie depuis le cache ne peut plus
   couper la page en deux sur un téléphone. */
.cset-blocks {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: var(--border-subtle);
}
@media (min-width: 900px) {
    .cset-blocks { grid-template-columns: 1fr 1fr; }
}
.cset-block {
    background: var(--bg-base);
    padding: var(--sp-4) var(--sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}
.cset-block-wide { grid-column: 1 / -1; }
.cset-block-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
}
.cset-block-head h3 {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--gold);
}
.cset-block-hint {
    font-size: 0.7rem;
    color: var(--text-faint);
}
.cset-block-head-split { align-items: flex-start; }
.cset-block-head-split .cset-block-hint { display: block; margin-top: 2px; }
.cset-block-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: auto;
    padding-top: var(--sp-1);
}
.cset-grid-2, .cset-grid-3 {
    display: grid;
    gap: var(--sp-3);
}
.cset-grid-2 { grid-template-columns: 1fr 1fr; }
.cset-grid-3 { grid-template-columns: repeat(3, 1fr); }
.cset-label-note { color: var(--text-faint); }
.cset-preview {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-sm);
    padding: var(--sp-2) var(--sp-3);
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.6;
}
.cset-preview strong { color: var(--gold); font-weight: 600; }

/* ── Onglets à jetons (mobile uniquement) ────────────────────── */
.cset-tabs { display: none; }

/* ── Gouvernement ────────────────────────────────────────────── */
.cset-add-slot {
    display: flex;
    gap: var(--sp-2);
    align-items: center;
}
.cset-add-slot input {
    height: 32px;
    width: 230px;
    padding: 0 var(--sp-3);
    border-radius: var(--r-sm);
    border: 1px solid var(--border-mid);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: 0.78rem;
}
.cset-slots {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}
.cset-slot {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    padding: var(--sp-3);
    display: flex;
    gap: var(--sp-4);
    align-items: flex-start;
}
.cset-slot-head {
    width: 170px;
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cset-slot-label { font-size: 0.7rem; color: var(--text-faint); }
.cset-slot-pid {
    height: 26px;
    width: 100%;
    padding: 0 var(--sp-2);
    border-radius: var(--r-sm);
    border: 1px solid var(--border-mid);
    background: var(--bg-base);
    color: var(--text-primary);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}
.cset-slot-count { font-size: 0.7rem; color: var(--text-faint); }
.cset-slot-note {
    flex: 1;
    font-size: 0.76rem;
    color: var(--text-faint);
    align-self: center;
}
.cset-chips {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
}
.cset-slot-actions { flex: none; }

/* Un jeton EST la permission : son état visuel est aussi son état ARIA,
   c'est lui que saveGovernmentSlot relit — pas une checkbox cachée. */
.cset-chip {
    padding: 3px 9px;
    border-radius: var(--r-full);
    font-family: inherit;
    font-size: 0.72rem;
    background: transparent;
    border: 1px solid var(--border-mid);
    color: var(--text-muted);
    cursor: pointer;
    transition: border-color var(--ease), color var(--ease), background var(--ease);
}
.cset-chip:hover { border-color: var(--border-gold); color: var(--text-secondary); }
.cset-chip.is-on {
    background: var(--gold-glow);
    border-color: var(--border-gold);
    color: var(--gold);
}
.cset-chip:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

/* ── Barre d'enregistrement collée en bas (mobile uniquement) ─── */
.cset-savebar { display: none; }

/* ── Unified Account Settings Page ──────────────────────────────── */
/* .aset = account settings. Mirrors the .cset layout (country settings)
   so the two pages feel like one system. 3 blocks: Profil / Password / Discord. */
.aset {
    background: var(--bg-base);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-lg);
    overflow: hidden;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}
.aset-head {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--border-subtle);
}
.aset-head-id { flex: 1; min-width: 0; }
.aset-eyebrow {
    font-size: 0.69rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.aset-title {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--gold);
    line-height: 1.2;
}
/* Comme .cset-tabs : masqués par défaut, n'apparaissent qu'en dessous de
   480px où un seul bloc à la fois tient à l'écran. */
.aset-tabs {
    display: none;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    border-bottom: 1px solid var(--border-subtle);
}
.aset-tab {
    padding: 5px 11px;
    border-radius: var(--r-full);
    border: 1px solid var(--border-mid);
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.78rem;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.15s;
}
.aset-tab:hover { border-color: var(--border-gold); color: var(--text-secondary); }
.aset-tab.is-active {
    background: var(--gold-glow);
    border-color: var(--border-gold);
    color: var(--gold);
}
/* Comme .cset-blocks : une colonne par défaut (mobile-first), les blocs
   sont tous visibles à la fois — c'est le média-query 480px plus bas qui
   les fait basculer en un-seul-à-la-fois avec les onglets. */
.aset-blocks {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: var(--border-subtle);
}
@media (min-width: 900px) {
    .aset-blocks { grid-template-columns: 1fr 1fr; }
}
.aset-block {
    display: flex;
    background: var(--bg-base);
    padding: var(--sp-4) var(--sp-5);
    flex-direction: column;
    gap: var(--sp-3);
}
.aset-block-wide { grid-column: 1 / -1; }
.aset-block-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-2);
}
.aset-block-head h3 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--gold);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}
.aset-block-hint {
    font-size: 0.7rem;
    color: var(--text-faint);
}
.aset-block-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--sp-2);
    padding-top: var(--sp-2);
    border-top: 1px solid var(--border-subtle);
}
@media (max-width: 480px) {
    .aset { border-radius: var(--r-md); }
    .aset-head { padding: var(--sp-3) var(--sp-4); }
    .aset-title { font-size: 1.3rem; }
    .aset-block { padding: var(--sp-3) var(--sp-4); }

    /* En dessous de 480px un seul bloc à la fois tient à l'écran : les
       onglets réapparaissent, exactement comme .cset-tabs/.cset-block. */
    .aset-tabs { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .aset-blocks { grid-template-columns: 1fr; gap: 0; }
    .aset-block { display: none; }
    .aset-block.is-active { display: flex; }
}

/* Drapeau : le bouton d'envoi a disparu au profit de celui du bloc, la
   ligne ne porte plus que l'aperçu et le sélecteur. */
.flag-upload-mode {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}
.flag-upload-mode input[type="text"] {
    flex: 1;
    height: 32px;
    padding: 0 var(--sp-3);
    border-radius: var(--r-sm);
    border: 1px solid var(--border-mid);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: 0.8rem;
}
.region-dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
}
.region-dropdown-caret { color: var(--text-faint); font-size: 0.65rem; }

/* ── 1024px — petit portable : les doctrines passent à deux colonnes ── */
@media (max-width: 1024px) {
    .cset-grid-3 { grid-template-columns: 1fr 1fr; }
}

/* Un bloc peut être en pleine largeur (Gouvernement) ou dans une colonne de
   ~420px : ses grilles internes se règlent sur la place réelle du bloc, pas
   sur celle de la fenêtre. */
.cset-block { container-type: inline-size; min-width: 0; }
@container (max-width: 560px) {
    .cset-grid-2, .cset-grid-3 { grid-template-columns: 1fr; }
}

/* ── 768px — tablette : blocs empilés, le slot devient vertical ─────── */
@media (max-width: 768px) {
    /* L'empilement des blocs est désormais le défaut (voir .cset-blocks) —
       il ne se redéclare pas ici.

       Les jetons passent en deux colonnes : en flux libre, huit libellés de
       longueurs inégales donnent une dernière ligne orpheline et une hauteur
       de slot qui saute d'un pays à l'autre. */
    .cset-chips {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-content: start;
    }
    .cset-chip { text-align: center; }

    .cset-head { padding: var(--sp-3) var(--sp-4); }
    .cset-head-flag { width: 42px; height: 42px; }
    .cset-title { font-size: 1.3rem; }
    /* Seul l'ID reste : capitale et monnaie sont déjà dans leur bloc. */
    .cset-head-meta > div:not(:first-child) { display: none; }

    .cset-block { padding: var(--sp-3) var(--sp-4); }
    .cset-slot { flex-direction: column; gap: var(--sp-2); }
    .cset-slot-head {
        width: 100%;
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--sp-2);
    }
    .cset-slot-pid { width: auto; flex: 1; }
    .cset-slot-actions { width: 100%; }
    .cset-slot-actions .btn { width: 100%; justify-content: center; }
    .cset-block-actions .btn { width: 100%; justify-content: center; }
    .cset-add-slot input { width: 100%; }
    .cset-block-head-split { flex-direction: column; align-items: stretch; }
}

/* ── 480px — mobile : un bloc à la fois, sélectionné par jeton, et une
   barre d'enregistrement collée en bas qui rejoue le bouton du bloc. ── */
@media (max-width: 480px) {
    .settings-page-country { max-width: none; }
    .cset { border-radius: var(--r-md); }
    .cset-head-meta { display: none; }

    .cset-tabs {
        display: flex;
        gap: var(--sp-2);
        padding: var(--sp-2) var(--sp-4);
        border-bottom: 1px solid var(--border-subtle);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .cset-tab {
        padding: 5px 11px;
        border-radius: var(--r-full);
        border: 1px solid var(--border-mid);
        background: transparent;
        color: var(--text-muted);
        font-family: inherit;
        font-size: 0.72rem;
        white-space: nowrap;
        cursor: pointer;
    }
    .cset-tab.is-active {
        background: var(--gold-glow);
        border-color: var(--border-gold);
        color: var(--gold);
    }

    .cset-blocks { grid-template-columns: 1fr; gap: 0; }
    .cset-block { display: none; }
    .cset-block.is-active { display: flex; }
    .cset-grid-2, .cset-grid-3 { grid-template-columns: 1fr; }

    /* WCAG 2.5.5 : au doigt, les champs du bloc affiché sont des cibles. */
    .settings-page-country .settings-field input,
    .settings-page-country .settings-field select,
    .settings-page-country .region-dropdown-toggle {
        height: var(--pr-touch-target);
    }

    /* Le bouton par bloc reste la référence sur grand écran ; sur mobile
       c'est la barre du bas qui l'actionne, donc on ne montre pas les deux. */
    .cset-block-actions { display: none; }

    .cset-savebar {
        position: sticky;
        bottom: 0;
        display: flex;
        gap: var(--sp-2);
        padding: var(--sp-3) var(--sp-4);
        border-top: 1px solid var(--border-mid);
        background: var(--bg-surface);
    }
    .cset-savebar .btn {
        flex: 1;
        height: var(--pr-touch-target);
        justify-content: center;
    }
    .cset-savebar .btn-primary { flex: 2; }
}

/* Identité d'un membre de gouvernement : le pseudo Discord au-dessus de son
   identifiant. Un id nu ne dit pas QUI occupe le slot — c'est ce que l'ancienne
   page Gouvernement apportait, et qu'elle emporte en disparaissant. */
.cset-slot-who { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.cset-slot-name {
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cset-slot-who .cset-slot-pid { font-size: 0.78rem; color: var(--text-muted); }

/* ── Quitter son pays ──────────────────────────────────────────────────────
   Le bloc est délibérément verbeux : c'est la seule action de cette page qu'on
   ne peut pas défaire soi-même, et la question qu'un joueur se pose vraiment —
   « est-ce que mon pays disparaît ? » — n'a pas de réponse ailleurs. */
.cset-leave {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    max-width: 620px;
}
.cset-leave p { margin: 0; font-size: 0.88rem; line-height: 1.55; color: var(--text-secondary); }
.cset-leave .btn { align-self: flex-start; }

/* L'onglet du bloc, mis à part : il ne se lit pas comme les quatre autres. */
.cset-tab[data-block-tab="quitter"] { margin-left: auto; color: var(--text-faint); }
.cset-tab[data-block-tab="quitter"].is-active { color: var(--danger); }

/* ── Entrer en jeu : les trois portes ──────────────────────────────────────
   Elles sont montrées ENSEMBLE et non dans un menu : un joueur qui vient
   chercher « comment je rejoins mes amis » ne sait pas que ça s'appelle
   « rejoindre un gouvernement », et ne le trouvera pas en dépliant. */
.entry-ways {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}
.entry-way {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid var(--border-mid);
    border-radius: var(--r-md);
    background: var(--bg-surface);
    text-align: left;
    cursor: pointer;
    font-family: var(--font-body);
}
.entry-way.is-active {
    border-color: var(--border-gold);
    background: var(--gold-glow);
}
.entry-way-title { font-weight: 600; color: var(--text-primary); font-size: 0.92rem; }
.entry-way-desc { font-size: 0.76rem; color: var(--text-muted); line-height: 1.4; }
.entry-way.is-active .entry-way-title { color: var(--gold-light); }

/* La liste des pays reprenables. Ordonnée par PIB : un pays vacant avec une
   économie est une reprise, un pays vacant vide est une coquille. */
.entry-vacant-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    max-height: 420px;
    overflow-y: auto;
}
.entry-vacant {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    background: var(--bg-surface);
    text-align: left;
    cursor: pointer;
    font-family: var(--font-body);
}
.entry-vacant.is-picked { border-color: var(--border-gold); background: var(--gold-glow); }
.entry-vacant-flag {
    flex: none;
    width: 34px;
    height: 22px;
    object-fit: cover;
    border-radius: 3px;
    border: 1px solid var(--border-subtle);
}
.entry-vacant-flag-empty { display: inline-block; background: var(--bg-overlay); }
.entry-vacant-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.entry-vacant-id strong { color: var(--text-primary); font-size: 0.88rem; overflow-wrap: anywhere; }
.entry-vacant-figs {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    flex: none;
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

/* ── Les candidatures reçues par un gouvernement ───────────────────────────
   En tête du bloc Gouvernement, parce que c'est une action à faire et que le
   reste du bloc est de la configuration. */
.gov-applications {
    margin-bottom: var(--sp-4);
    padding: var(--sp-3);
    border: 1px solid var(--border-gold);
    border-radius: var(--r-md);
    background: var(--gold-glow);
}
.gov-applications h4 { margin: 0 0 var(--sp-2); font-size: 0.88rem; color: var(--gold-light); }
.gov-application + .gov-application { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--border-subtle); }
.gov-application-who { display: flex; align-items: baseline; gap: var(--sp-2); }
.gov-application-msg {
    margin: var(--sp-2) 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-secondary);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}