/* ══ Diplomatie — civilisations mineures ══
   Aligné sur le design system : --font-display (Orbitron) titres, --font-body (Rajdhani)
   texte, --font-mono (Share Tech Mono) chiffres, --accent (thème faction) pour l'accent. */

.diplo-wrap { padding: 16px 20px 30px; }
.diplo-head-title {
  font-family: var(--font-display); font-weight: 800; letter-spacing: 3px;
  font-size: var(--fs-2xl); color: var(--textbright); margin: 0;
  text-shadow: 0 0 18px rgba(var(--accent-rgb), 0.45);
}
.diplo-head-sub {
  font-family: var(--font-body); font-size: var(--fs-lg); color: var(--textmid);
  margin-top: 5px; letter-spacing: .3px;
}

.diplo-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
  gap: 16px; margin-top: 18px;
}

/* ── Jetons locaux de la page (passe design du 25/08) ───────────────────────────
   Avant : SIX bleus sombres presque identiques dans le fichier, dont deux paires qui
   peignaient le MEME rôle (.diplo-card et .diplo-modal) avec des valeurs différentes —
   invisible à l'œil, ingérable à la main. Une seule surface nommée, déclinée en
   « éteint » pour ce qui est verrouillé. Les valeurs sont celles de la carte, qui est
   la surface la plus présente à l'écran : le thème ne bouge pas, il se range. */
/* Sur :root, PAS sur .diplo-wrap : la modale de don est posée par
   `document.body.appendChild` — elle vit donc HORS du conteneur de la page, et des
   jetons déclarés là ne l'atteindraient pas. Elle aurait perdu son fond sans que rien
   ne le signale. */
:root {
  --dip-panel-hi:      rgba(12,18,34,0.96);
  --dip-panel-lo:      rgba(6,10,22,0.96);
  --dip-panel-mute-hi: rgba(10,14,26,0.92);
  --dip-panel-mute-lo: rgba(6,9,18,0.92);
  --dip-line-mute:     rgba(150,168,196,0.16);
  --dip-line-mute-2:   rgba(150,168,196,0.22);
  --dip-line-mute-3:   rgba(150,168,196,0.30);
  --dip-line-cool:     rgba(120,160,210,0.16);
}

.diplo-card {
  position: relative; display: flex; flex-direction: column; gap: 9px;
  background: linear-gradient(180deg, var(--dip-panel-hi), var(--dip-panel-lo));
  border: 1px solid rgba(var(--accent-rgb), 0.26);
  border-radius: var(--radius-lg); padding: 17px 18px; backdrop-filter: blur(12px);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.diplo-card:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--accent-rgb), 0.55);
  box-shadow: 0 10px 30px rgba(var(--accent-rgb), 0.16);
}
.diplo-card.ally { border-color: rgba(var(--gold-rgb), 0.55); box-shadow: 0 0 26px rgba(var(--gold-rgb), 0.13); }
.diplo-card.locked {
  opacity: .78; text-align: center; align-items: center;
  border-color: var(--dip-line-mute); background: linear-gradient(180deg, var(--dip-panel-mute-hi), var(--dip-panel-mute-lo));
}
.diplo-card.locked:hover { transform: none; box-shadow: none; border-color: var(--dip-line-mute-3); }
.diplo-icon { font-size: var(--fs-4xl); line-height: 1; filter: drop-shadow(0 0 9px rgba(var(--accent-rgb), 0.55)); }
.diplo-card.locked .diplo-icon { filter: grayscale(1) brightness(.9); font-size: var(--fs-display-1); margin-bottom: 2px; }
.diplo-name {
  font-family: var(--font-display); font-weight: 700; letter-spacing: 1.5px;
  font-size: var(--fs-lg); color: var(--textbright);
}
.diplo-card.locked .diplo-name { color: var(--textmid); }
.diplo-tier {
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 1.5px;
  color: var(--accent); margin-top: 3px; text-transform: uppercase;
}
.diplo-tier.ally { color: var(--gold); }

.diplo-lore {
  font-family: var(--font-body); font-size: var(--fs-md); line-height: 1.5;
  color: var(--textmid); min-height: 60px;
}
.diplo-card.locked .diplo-lore { min-height: 0; font-size: var(--fs-base); }

/* Rivalité (18/08) — trois états, tous explicites : avertissement avant de sceller,
   plafond en cours avec sa cause, ou droit acquis. Jamais un plafond muet. */
.diplo-rival {
  font-family: var(--font-body); font-size: var(--fs-base); line-height: 1.5;
  color: var(--textsoft); margin: 4px 0 2px;
}
.diplo-rival .warn { color: var(--warn); }
.diplo-rival.blocked { color: var(--danger); }
.diplo-rival.kept { color: var(--gold); }
.diplo-renounce {
  display: block; margin-top: 5px; width: 100%;
  font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: 1px;
  padding: 6px 10px; border-radius: var(--radius-s); cursor: pointer;
  background: transparent; border: 1px solid var(--warn); color: var(--warn);
  transition: background-color .15s ease, color .15s ease;
}
.diplo-renounce:hover, .diplo-renounce:focus-visible {
  background: var(--warn); color: var(--bg); outline: none;
}

.diplo-relrow {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--textsoft);
}
.diplo-relrow .lbl {
  font-family: var(--font-display); letter-spacing: 1.5px; font-size: var(--fs-xs);
  color: var(--textmid); text-transform: uppercase;
}
.diplo-gauge {
  height: 8px; background: rgba(0,0,0,0.42); border-radius: var(--radius-s); overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb), 0.14);
}
/* Animée par transform et non par width : une barre qui change de largeur fait recalculer
   la mise en page à chaque image. Le rayon est retiré ici car le rail le porte déjà
   (`overflow:hidden`) — sans ça, `scaleX` écraserait les coins arrondis. */
.diplo-gauge-fill {
  height: 100%; width: 100%; transform-origin: left center;
  transform: scaleX(var(--diplo-pct, 0)); transition: transform .45s ease;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.55), var(--accent));
}
.diplo-gauge-fill.ally { background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 52%, #000), var(--gold)); }

.diplo-bonus {
  padding: 9px 11px; border-radius: var(--radius-md);
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.22);
}
.diplo-bonus-main {
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-base);
  color: var(--textbright); letter-spacing: .5px;
}
.diplo-bonus-main .at { color: var(--textsoft); font-family: var(--font-body); font-weight: 600; letter-spacing: 0; }
.diplo-bonus-now { font-family: var(--font-body); font-size: var(--fs-sm); color: var(--textmid); margin-top: 3px; }
.diplo-bonus-now b { color: var(--accent); font-family: var(--font-mono); font-weight: 400; }

.diplo-cost { font-family: var(--font-body); font-size: var(--fs-sm); color: var(--textsoft); letter-spacing: .2px; }
.diplo-cost b { color: var(--textmid); font-family: var(--font-mono); font-weight: 400; }

.diplo-mission {
  padding: 9px 11px; border-radius: var(--radius-md);
  background: rgba(0,0,0,0.24); border: 1px solid var(--dip-line-cool);
}
.diplo-mission-lbl { font-family: var(--font-body); font-size: var(--fs-sm); color: var(--textmid); }
.diplo-mission-prog { font-family: var(--font-mono); font-size: var(--fs-base); color: var(--textbright); font-weight: 700; margin-top: 2px; }
.diplo-mission-cd { font-family: var(--font-body); font-size: var(--fs-xs); color: var(--textsoft); margin-top: 4px; }

.diplo-lock-bonus {
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-base);
  color: var(--accent); margin-top: 9px; letter-spacing: .5px;
}
.diplo-lock-status { font-family: var(--font-body); font-size: var(--fs-sm); color: var(--textsoft); margin-top: 9px; }
.diplo-lock-cond { font-family: var(--font-body); font-size: var(--fs-sm); color: var(--textmid); margin-top: 2px; }

/* La Faveur des Peuples (v9.6) — course du cycle, agrégée par escouade */
/* Depuis les sous-onglets, la Faveur occupe l'ecran a elle seule : sans largeur maximale,
   la ligne s'etirait et le bouton d'offrande passait a la ligne sur toute la largeur. */
.diplo-fav {
  margin: 18px auto 14px; max-width: 760px; padding: 13px 16px; border-radius: var(--radius-lg);
  background: rgba(0,0,0,0.26); border: 1px solid rgba(var(--accent-rgb), 0.26);
  display: flex; flex-direction: column; gap: 7px;
}
.diplo-fav-hdr {
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xs);
  color: var(--accent); letter-spacing: 2px;
}
.diplo-fav-sub { font-family: var(--font-body); font-size: var(--fs-sm); color: var(--textsoft); }
.diplo-fav-held {
  font-family: var(--font-body); font-size: var(--fs-base); color: var(--gold);
  background: rgba(var(--gold-rgb), 0.08); border: 1px solid rgba(var(--gold-rgb), 0.30);
  border-radius: var(--radius-md); padding: 7px 10px;
}
.diplo-fav-cap { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--textmid); }
.diplo-fav-rows { display: flex; flex-direction: column; gap: 6px; }
.diplo-fav-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 7px 9px; border-radius: var(--radius-md);
  background: rgba(0,0,0,0.22); border: 1px solid rgba(var(--accent-rgb), 0.12);
}
.diplo-fav-row.mine { border-color: rgba(var(--gold-rgb), 0.34); background: rgba(var(--gold-rgb), 0.06); }
.diplo-fav-civ { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); color: var(--textbright); }
.diplo-fav-lead { font-family: var(--font-body); font-size: var(--fs-sm); color: var(--textmid); }
.diplo-fav-mine { font-family: var(--font-body); font-size: var(--fs-sm); color: var(--success); }
/* .rp-upgrade-btn est un bouton de carte : display:block et width:calc(100%-28px).
   Dans une ligne en flex il prenait donc toute la largeur et passait a la ligne. */
.diplo-btn-fav {
  margin: 0 0 0 auto; width: auto; flex: 0 0 auto;
  font-size: var(--fs-sm); padding: 7px 12px;
}
.diplo-btn-cancel {
  flex: 1; border-color: rgba(var(--accent-rgb), 0.22) !important;
  color: var(--textmid) !important; background: transparent !important;
}

/* Émissaire (v9.5) — bandeau en tête de section + ligne par peuple */
.diplo-emi {
  margin: 0 0 14px; padding: 13px 16px; border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(var(--gold-rgb), 0.12), rgba(0,0,0,0.32));
  border: 1px solid rgba(var(--gold-rgb), 0.40);
}
.diplo-emi.none { background: rgba(0,0,0,0.28); border-color: var(--dip-line-mute-2); }
.diplo-emi-hdr {
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xs);
  color: var(--gold); letter-spacing: 2px;
}
.diplo-emi.none .diplo-emi-hdr { color: var(--textsoft); }
.diplo-emi-name {
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg);
  color: var(--textbright); margin-top: 4px;
}
.diplo-emi-stars { color: var(--gold); text-shadow: 0 0 9px rgba(var(--gold-rgb), 0.55); }
.diplo-emi-eff { font-family: var(--font-body); font-size: var(--fs-base); color: var(--textmid); margin-top: 3px; }
.diplo-emi-cd { font-family: var(--font-body); font-size: var(--fs-sm); color: var(--textsoft); margin-top: 5px; }

.diplo-emi-row {
  padding: 9px 11px; border-radius: var(--radius-md);
  background: rgba(0,0,0,0.24); border: 1px solid var(--dip-line-cool);
  display: flex; flex-direction: column; gap: 5px;
}
.diplo-emi-row.on { background: rgba(var(--gold-rgb), 0.08); border-color: rgba(var(--gold-rgb), 0.38); }
.diplo-emi-row-hdr { font-family: var(--font-body); font-size: var(--fs-sm); color: var(--textsoft); }
.diplo-emi-row-hdr b { color: var(--textbright); }
.diplo-emi-row-eff { font-family: var(--font-body); font-size: var(--fs-sm); color: var(--textmid); }
.diplo-emi-seated {
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm);
  color: var(--gold); letter-spacing: .6px; text-align: center;
}
.diplo-emi-req { font-family: var(--font-body); font-size: var(--fs-sm); color: var(--textsoft); text-align: center; }
.diplo-btn-emi {
  border-color: var(--gold) !important; color: var(--gold) !important;
  background: rgba(var(--gold-rgb), 0.10) !important; font-size: var(--fs-sm); padding: 8px;
}
.diplo-btn-emi:disabled { border-color: rgba(var(--gold-rgb), 0.25) !important; color: var(--textsoft) !important; background: transparent !important; }

/* Pactes (★/★★/★★★ après « Allié ») */
.diplo-stars { display: flex; gap: 5px; justify-content: center; }
.diplo-star { font-size: var(--fs-lg); color: rgba(var(--gold-rgb), 0.22); line-height: 1; }
.diplo-star.on { color: var(--gold); text-shadow: 0 0 9px rgba(var(--gold-rgb), 0.55); }
/* ── L'étoile PRÊTÉE par la Faveur des Peuples ─────────────────────────────────
   Elle compte comme une scellée dans les effets, mais elle expire avec la Faveur.
   Elle est donc allumée — sinon le joueur ne la voit pas, ce qui était le bug —
   mais dans l'encre de l'Émissaire et non dans l'or des Pactes, et elle respire :
   ce qui bouge est ce qui va partir.
   🔑 Deux choses qui n'ont pas la même durée de vie ne portent pas la même encre. */
.diplo-star.lent {
  /* 🔑 `--ancient-rgb` N'EXISTE PAS. Je l'avais écrit par symétrie avec
     `--gold-rgb` juste au-dessus : `rgba(var(--jeton-absent), .55)` est une
     déclaration INVALIDE, que le navigateur jette sans un mot. L'étoile serait
     restée grise — soit exactement le bug que je corrige. `--ancient` vaut
     #00e5ff, on écrit la lueur en clair. */
  color: var(--ancient);
  text-shadow: 0 0 9px rgba(0, 229, 255, 0.55);
  animation: diploStarLent 3.2s ease-in-out infinite;
  cursor: help;
}
@keyframes diploStarLent { 0%, 100% { opacity: 1; } 50% { opacity: .58; } }
@media (prefers-reduced-motion: reduce) {
  .diplo-star.lent { animation: none; }
}

.diplo-pact {
  padding: 9px 11px; border-radius: var(--radius-md);
  background: rgba(var(--gold-rgb), 0.06); border: 1px solid rgba(var(--gold-rgb), 0.22);
  display: flex; flex-direction: column; gap: 6px;
}
.diplo-pact.maxed {
  font-family: var(--font-body); font-size: var(--fs-sm); color: var(--gold); text-align: center;
}
.diplo-pact-hdr {
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm);
  color: var(--gold); letter-spacing: .6px;
  display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline;
}
.diplo-pact-gain { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-xs); color: var(--textmid); letter-spacing: 0; }
.diplo-pact-cost { display: flex; flex-direction: column; gap: 2px; }
.diplo-pact-need { font-family: var(--font-body); font-size: var(--fs-sm); color: var(--textsoft); }
.diplo-pact-need.ok { color: var(--success); }

/* Boutons : reprennent .rp-upgrade-btn, variantes colorées */
.diplo-card .rp-upgrade-btn { font-family: var(--font-display); letter-spacing: 1px; }
.diplo-btn-claim { border-color: var(--success) !important; color: var(--success) !important; background: rgba(var(--success-rgb), 0.08) !important; }
.diplo-btn-ally  { border-color: var(--gold) !important; color: var(--gold) !important; background: rgba(var(--gold-rgb), 0.10) !important; }
.diplo-btn-pact  { border-color: var(--gold) !important; color: var(--gold) !important; background: rgba(var(--gold-rgb), 0.10) !important; font-size: var(--fs-sm); padding: 8px; }
.diplo-btn-pact:disabled { border-color: rgba(var(--gold-rgb), 0.25) !important; color: var(--textsoft) !important; background: transparent !important; }

/* Modale de don */
.diplo-modal {
  width: min(430px, 94vw);
  background: linear-gradient(160deg, var(--dip-panel-hi), var(--dip-panel-lo));
  border: 1px solid rgba(var(--accent-rgb), 0.35); border-radius: var(--radius-xl); padding: 22px;
  box-shadow: 0 18px 50px var(--shade-5);
}
.diplo-modal h3 { font-family: var(--font-display); font-size: var(--fs-xl); color: var(--textbright); margin: 0 0 14px; letter-spacing: 1px; }
.diplo-modal label { font-family: var(--font-body); font-size: var(--fs-base); color: var(--textmid); display: block; }
.diplo-modal label .bal { color: var(--textsoft); font-family: var(--font-mono); font-size: var(--fs-sm); }
.diplo-modal .diplo-preview { font-family: var(--font-body); font-size: var(--fs-base); color: var(--accent); margin: 12px 0; }
.diplo-modal .diplo-preview b { font-family: var(--font-mono); font-weight: 700; }
.diplo-modal .diplo-note { font-family: var(--font-body); font-size: var(--fs-xs); color: var(--textsoft); line-height: 1.45; margin-bottom: 14px; }
.diplo-max-btn {
  flex: 0 0 auto; padding: 0 13px; font-family: var(--font-display); font-size: var(--fs-xs); letter-spacing: 1px;
  background: rgba(var(--accent-rgb), 0.14); color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb), 0.4); border-radius: var(--radius); cursor: pointer;
}
.diplo-max-btn:hover { background: rgba(var(--accent-rgb), 0.24); }

/* ── Le Sanctuaire Furling (18/08) ─────────────────────────────────────────────────────
   Bloc de quête placé sous les peuples. Volontairement plus sobre que les cartes de
   civilisation : c'est un objectif lointain, pas une relation qu'on entretient chaque jour. */
.fur-wrap {
  margin: 18px auto 0; max-width: 760px; padding: 14px 16px;
  background: var(--shade-1); border: 1px solid var(--tint-8); border-radius: var(--radius-lg);
}
.fur-wrap.locked { opacity: .7; }
.fur-hdr {
  font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700;
  letter-spacing: 2px; color: var(--textbright); text-transform: uppercase;
}
.fur-sub {
  font-family: var(--font-body); font-size: var(--fs-md); color: var(--textmid);
  line-height: 1.5; margin: 4px 0 10px;
}
.fur-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--textsoft); margin-top: 6px;
}
.fur-row b { color: var(--textbright); }
/* Le rail doit se VOIR meme a zero fragment : un noir sur fond noir ne dit pas
   « il en manque six », il ne dit rien du tout. */
.fur-gauge {
  height: 6px; border-radius: var(--radius-sm);
  background: var(--tint-6); border: 1px solid var(--tint-8);
  overflow: hidden; margin: 4px 0 2px;
}
/* Jauge animée par transform et non par width : une barre sans contenu se met à l'échelle
   sans provoquer de recalcul de mise en page (le rendu est identique à l'œil). */
.fur-gauge-fill {
  height: 100%; width: 100%; background: var(--accent);
  transform-origin: left center; transform: scaleX(var(--fur-pct, 0));
  transition: transform .45s ease;
}
.fur-form { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.fur-form .adm-input { flex: 1; min-width: 180px; }
.fur-note, .fur-none {
  font-family: var(--font-body); font-size: var(--fs-base); color: var(--textsoft); margin-top: 6px;
}
.fur-active, .fur-done {
  font-family: var(--font-body); font-size: var(--fs-md); color: var(--textmid);
  margin-top: 10px; padding: 8px 10px; border-radius: var(--radius-sm);
  background: var(--shade-2); border: 1px solid var(--tint-8);
}
.fur-done { color: var(--gold); border-color: var(--gold); }
.fur-hist { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.fur-chip {
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--textsoft);
  padding: 3px 7px; border-radius: var(--radius-sm);
  background: var(--shade-2); border: 1px solid var(--tint-8);
}
.fur-chip.hit { color: var(--gold); border-color: var(--gold); }

/* Risques annoncés AVANT le clic : piège d'exploration, trahison des Genii.
   Un pari qu'on découvre après coup n'est pas un pari, c'est une punition. */
.fur-risk, .diplo-betray {
  font-family: var(--font-body); font-size: var(--fs-base); line-height: 1.5;
  color: var(--warn); margin-top: 6px;
}
.diplo-betray { margin: 2px 0 0; }

/* Relation endormie : un RAPPEL, pas un reproche. Aucune conséquence mécanique n'y est
   attachée — l'érosion a été écartée (elle aurait rétrogradé 55 % des relations du jeu).
   Ton neutre, couleur sourde : le joueur voit ce qui dort, il ne se sent pas puni. */
.diplo-dormant {
  font-family: var(--font-body); font-size: var(--fs-base); line-height: 1.5;
  color: var(--textsoft); margin: 4px 0 0; opacity: .9;
}

/* Sommet atteint : le bouton de don DISPARAISSAIT sans un mot. Un contrôle qui s'efface
   se lit comme un bug — on dit à sa place pourquoi il n'y a plus rien à offrir. */
.diplo-maxed-note {
  font-family: var(--font-body); font-size: var(--fs-base); color: var(--textsoft);
  text-align: center; margin-top: 2px; padding: 8px 10px;
  border: 1px dashed var(--tint-9); border-radius: var(--radius-sm);
}

/* La course de la Faveur avait un vainqueur mais pas d'échéance visible. */
.diplo-fav-ends {
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--textsoft);
}

/* ── Sous-onglets (maquette Sky, 18/08) ─────────────────────────────────────────────
   Quatorze peuples sur une seule colonne : le bas de page n'était jamais atteint.
   Barre scrollable sur téléphone plutôt que repliée — un onglet caché n'est pas un onglet. */
.diplo-tabs {
  display: flex; gap: 8px; margin-top: 16px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid var(--tint-8); padding-bottom: 10px;
}
.diplo-tabs::-webkit-scrollbar { display: none; }
.diplo-tab {
  flex: 0 0 auto; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm);
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--textsoft); background: var(--shade-1);
  border: 1px solid var(--tint-8); border-radius: var(--radius-sm);
  /* 25/08 : les onglets mesuraient 35 px de haut — sous la cible tactile de 44.
     C'est la barre de navigation de la page entiere : c'est le premier geste. */
  padding: 9px 15px; white-space: nowrap;
  min-height: 44px; display: inline-flex; align-items: center; gap: 6px;
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.diplo-tab:hover { color: var(--textbright); border-color: rgba(var(--accent-rgb), 0.5); }
.diplo-tab.on {
  color: var(--gold); border-color: rgba(var(--gold-rgb), 0.6);
  background: rgba(var(--gold-rgb), 0.10);
}
.diplo-tab-n {
  font-family: var(--font-mono); font-size: var(--fs-xs); opacity: .75;
  margin-left: 3px;
}
.diplo-empty {
  font-family: var(--font-body); font-size: var(--fs-md); color: var(--textsoft);
  text-align: center; padding: 34px 16px; margin-top: 18px;
  border: 1px dashed var(--tint-9); border-radius: var(--radius-lg);
}

/* ── Les actions sous un seul en-tête (maquette Sky) ────────────────────────────────
   Sceller, offrir, faire siéger, la mission : c'est le même geste — agir sur ce peuple.
   Les regrouper sépare enfin CE QU'ON LIT (relation, bonus) de CE QU'ON FAIT. */
.diplo-actions {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 3px; padding: 10px; border-radius: var(--radius-md);
  background: var(--shade-1); border: 1px solid var(--tint-8);
}
.diplo-actions-hdr {
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xs);
  letter-spacing: 2px; color: var(--textsoft); text-align: center;
}

/* Téléphone : les quatre onglets ne tiennent pas en 320 px. On les resserre ET on garde
   le défilement — avec un fondu à droite, sinon rien ne dit que « Furlings » existe. */
@media (max-width: 560px) {
  .diplo-tabs {
    /* `currentColor` plutôt qu'un noir en dur : dans un masque seule l'ALPHA compte, donc
       aucune couleur du design system n'est en jeu — et rien à dispenser dans le contrôle. */
    -webkit-mask-image: linear-gradient(90deg, currentColor 88%, transparent 100%);
    mask-image: linear-gradient(90deg, currentColor 88%, transparent 100%);
    gap: 6px;
  }
  .diplo-tab { font-size: var(--fs-xs); letter-spacing: .8px; padding: 8px 10px; min-height: 44px; }
  .diplo-tab-n { display: none; }
}

/* ══════════ Passe de lisibilité du 25/08 ══════════
   Mesuré avant : 88 mots et 21 boîtes imbriquées sur 5 niveaux par carte, la règle de
   rivalité répétée mot pour mot sur chacune, et le bouton « Faire un don » — le geste
   quotidien — à y 849, sous le pli d'un écran de 1440×860. */

/* La règle de rivalité, dite UNE fois sous le bandeau d'Émissaire. Discrète : c'est une
   note de règle, pas une alerte — elle ne doit pas concurrencer le nom du peuple. */
.diplo-rule {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid rgba(var(--accent-rgb), 0.14);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--textsoft);
  line-height: 1.5;
}

/* Le don, collé à la jauge qu'il fait monter. C'est l'action principale de la carte :
   elle se voit sans défiler et se distingue des boutons secondaires. */
.diplo-btn-gift {
  margin-top: 2px;
  font-size: var(--fs-base);
  padding: 11px;
  width: 100%;
}

/* Bloc Émissaire replié tant qu'il faut être allié : une ligne au lieu de trois.
   Le détail reste à un clic — replier ne doit jamais effacer une information. */
.diplo-emi-row.locked {
  padding: 8px 10px;
  cursor: pointer;
}
.diplo-emi-row.locked > summary {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--textsoft);
  list-style: none;
  cursor: pointer;
  min-height: 24px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.diplo-emi-row.locked > summary::-webkit-details-marker { display: none; }
.diplo-emi-row.locked > summary::after {
  content: '⌄';
  margin-left: auto;
  transition: transform .18s ease;
}
.diplo-emi-row.locked[open] > summary::after { transform: rotate(180deg); }
.diplo-emi-row.locked[open] > summary { margin-bottom: 6px; }

/* Le palier visé, à côté du mot « Relation » : un compteur sans destination
   (« 0 / 300 pts ») n'apprend rien. Volontairement discret — c'est une précision
   sur le libellé, pas une deuxième étiquette. */
.diplo-relrow .diplo-next {
  color: var(--accent);
  font-weight: 400;
  letter-spacing: 0;
}

/* ── Téléphone : l'en-tête mangeait 670 px des 778 disponibles ──────────────────
   Mesuré sur 390×844 : le titre sortait sur TROIS lignes en corps d'affichage
   (~155 px), suivi de deux lignes de sous-titre (~78 px). Le premier bouton
   « Faire un don » tombait à y 924, très en dessous du pli.
   Le titre passe sur une ligne et le sous-titre disparaît : la barre du bas et le
   menu disent déjà où l'on est, et la phrase d'ambiance ne se lit qu'une fois.
   (Même geste que le titre de page retiré de la vue d'ensemble et le titre
   « Destinations » de la Porte, le 25/08.) */
@media (max-width: 768px) {
  .diplo-head-title {
    font-size: var(--fs-2xl);
    line-height: 1.15;
    letter-spacing: 1px;
    margin-bottom: 2px;
  }
  .diplo-head-sub { display: none; }
}

/* ══════════ Onglets « La Faveur » et « Furlings » — passe du 25/08 ══════════ */

/* La Faveur : les boutons faisaient 31 px de haut — sous la cible tactile de 44,
   et il y en avait quatorze à la suite. Ils passent en contour : quatorze boutons
   pleins ne hiérarchisent rien. Seule la ligne « à prendre » garde l'accent. */
.diplo-fav-row .diplo-btn-fav {
  min-height: 44px;
  padding: 0 16px;
  background: transparent;
  border: 1px solid var(--border2);
  color: var(--textmid);
  font-size: var(--fs-sm);
}
.diplo-fav-row .diplo-btn-fav:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
}
.diplo-fav-row .diplo-btn-fav.hot {
  border-color: var(--gold);
  color: var(--gold);
}
.diplo-fav-row .diplo-btn-fav.hot:hover:not(:disabled) {
  background: rgba(var(--gold-rgb), 0.12);
  color: var(--gold);
}

/* « Personne encore — à prendre » : l'information la plus utile de l'onglet, elle était
   noyée sous la même grisaille que le reste. */
.diplo-fav-free { color: var(--gold); font-weight: 600; }
.diplo-fav-row.free { border-left: 2px solid rgba(var(--gold-rgb), 0.45); }

/* Furlings verrouillé : le bouton qui mène à la recherche manquante. Un écran qui nomme
   une condition doit pouvoir y conduire. */
.fur-btn-goto { margin-top: 12px; min-height: 44px; width: 100%; }