/* Royaumes et peuples : styles propres à cette page seulement. Aucune couleur en dur, tout vient de theme.css. */

.rk-layout { display: grid; gap: 32px; align-items: start; }
@media (min-width: 920px) {
  .rk-layout { grid-template-columns: minmax(0, 430px) minmax(0, 1fr); gap: 48px; }
  .rk-side { position: sticky; top: 20px; }
}

/* La carte */
.rk-mapcard { background: var(--night); border-radius: var(--r-lg); padding: 18px 18px 22px; }
.rk-map { display: block; width: 100%; height: auto; }
.rk-zone {
  fill: var(--forest); stroke: var(--gold); stroke-width: 2; cursor: pointer;
  transition: fill .18s ease;
}
.rk-zone:hover { fill: var(--forest-2); }
.rk-zone:focus-visible { outline: none; stroke: var(--gold-soft); stroke-width: 4.5; }
.rk-zone.is-on { fill: var(--gold); }
.rk-isle { cursor: pointer; }
.rk-label {
  fill: var(--on-night); font-family: var(--font-body); font-size: 20px; font-weight: 600;
  text-anchor: middle; pointer-events: none; transition: fill .18s ease;
}
.rk-label.is-on { fill: var(--night); }
.rk-hint { color: var(--on-night-2); font-size: .875rem; margin: 14px 0 0; }

/* La liste des huit espaces, sous la carte : une autre façon d'y arriver, utile au doigt comme au clavier. */
.rk-legend { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.rk-legend button {
  font: inherit; font-size: .875rem; cursor: pointer; border-radius: 999px; padding: 7px 14px;
  color: var(--on-night); background: rgb(var(--on-night-rgb) / .08); border: 1px solid rgb(var(--on-night-rgb) / .26);
}
.rk-legend button:hover { background: rgb(var(--on-night-rgb) / .16); }
.rk-legend button[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--night); }

/* Le panneau de l'espace choisi */
.rk-panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px 24px 30px; }
.rk-panel:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
@media (min-width: 760px) { .rk-panel { padding: 34px 36px 40px; } }
.rk-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; }
.rk-panel h2 { margin: 0; font-size: clamp(1.7rem, 4.5vw, 2.3rem); }
.rk-listen { flex: none; }
.rk-listen[data-etat="absent"] { opacity: .55; cursor: default; }
.rk-resume { color: var(--ink-2); margin: 10px 0 0; }
.rk-empty { color: var(--ink-2); margin: 0; }
.rk-h3 { font-family: var(--font-display); font-size: 1.35rem; margin: 30px 0 12px; }

.rk-tags { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.rk-tags li { font-size: .875rem; padding: 5px 12px; border-radius: 999px; background: var(--wash); border: 1px solid var(--line); color: var(--ink); }
.rk-tags.rk-tags-gold li { background: var(--gold-wash); border-color: var(--gold-edge); color: var(--gold-ink); }

.rk-reigns { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.rk-reign { border-left: 3px solid var(--gold); padding-left: 16px; }
.rk-reign strong { display: block; font-family: var(--font-display); font-size: 1.15rem; }
.rk-when { display: block; font-size: .8125rem; color: var(--ink-2); margin-top: 1px; }
.rk-reign p { margin: 6px 0 0; color: var(--prose-ink); }

/* Ce que la fiche ne dit pas, et d'où elle vient */
.rk-limites { margin: 0; padding: 14px 16px; border-radius: var(--r-md); background: var(--wash); border: 1px solid var(--line); color: var(--prose-ink); }
.rk-sources { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.rk-sources li { border-left: 3px solid var(--line-2); padding-left: 16px; }
.rk-sources strong { display: block; font-family: var(--font-display); font-size: 1.05rem; }
.rk-ref { display: block; font-size: .8125rem; color: var(--ink-2); margin-top: 1px; }
.rk-sources p { margin: 6px 0 0; color: var(--prose-ink); font-size: .9375rem; }
.rk-updated { margin: 24px 0 0; font-size: .8125rem; color: var(--ink-2); }

/* Ce que le visiteur apporte */
.rk-apport { margin-top: 34px; background: var(--wash); border: 1px solid var(--line); border-radius: var(--r-md); padding: 22px; }
.rk-apport .rk-h3 { margin-top: 0; }
.rk-apport > p { margin: 0 0 18px; color: var(--prose-ink); }
.rk-q { margin: 0 0 18px; }
.rk-q-label { margin: 0 0 8px; font-weight: 600; color: var(--ink); }
.rk-q-ligne { display: flex; flex-wrap: wrap; gap: 8px; }
.rk-q-ligne input { flex: 1 1 12rem; min-width: 0; font: inherit; padding: 9px 12px; border-radius: var(--r-md); border: 1px solid var(--line-2); background: var(--card); color: var(--ink); }
.rk-q-ligne input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.rk-q-aide { display: block; margin-top: 6px; font-size: .8125rem; color: var(--ink-2); }
.rk-juge { margin-top: 6px; padding-top: 18px; border-top: 1px solid var(--line); }
.rk-juge-valeur { margin: 0 0 12px; font-family: var(--font-display); font-size: 1.3rem; color: var(--ink); }
.rk-ankh { margin: 14px 0 0; font-weight: 600; color: var(--gold-ink); }
.rk-dit { margin: 6px 0 0; font-size: .9375rem; color: var(--prose-ink); }
.rk-invite { margin-top: 16px; padding: 16px; border-radius: var(--r-md); background: var(--gold-wash); border: 1px solid var(--gold-edge); }
.rk-invite p { margin: 0 0 12px; color: var(--gold-ink); }

/* Les guides de l'espace */
.rk-guides { margin-top: 34px; background: var(--gold-wash-2); border: 1px solid var(--gold-edge); border-radius: var(--r-md); padding: 22px; }
.rk-guides .rk-h3 { margin-top: 0; }
.rk-guides p { margin: 0 0 14px; color: var(--prose-ink); }
.rk-guides p:last-child { margin-bottom: 0; }
.rk-guide { border-top: 1px solid var(--gold-edge); padding-top: 14px; margin-top: 14px; }
.rk-guide strong { display: block; }