/* =====================================================================
   ZAW'IA — LA KHARITA · les styles de la carte (partagés).

   La carte est un SVG que dessine assets/js/zawia-kharita.js. Deux pages la
   posent : zawia.tech/kharita (zawia-kharita.html) et le jeu
   (zawia-jeu.html, panneau « La Kharita »). Les styles vivent ICI, une
   seule fois : recopiés dans deux pages, ils auraient divergé au premier
   réglage.

   Les jetons sont préfixés --kh- et posés sur la carte elle-même : le jeu
   et la page ont chacun leurs --ink, --gold, --line, et la carte ne doit
   dépendre d'aucun des deux.
   ===================================================================== */
.kh-scroll, .kh-scene, .kh-tip {
  --kh-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --kh-emerald-deep: #14684f;
  --kh-font-ar: "Amiri", serif;
  --kh-font-body: "Inter", -apple-system, "Segoe UI", sans-serif;
  --kh-font-caps: "Cinzel", serif;
  --kh-font-display: "Cormorant Garamond", Georgia, serif;
  --kh-ink-dark: #241c0e;
  --kh-ink-dark-soft: #5c5138;
  --kh-sepia: #3b2a12;
}

.kh-scroll { overflow: auto; border-radius: 14px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(230, 177, 63, 0.18); background: #1a1410; }
.kh-scene { position: relative; min-width: 900px; }
.kh-carte { display: block; width: 100%; height: auto; font-family: var(--kh-font-caps); }

/* Le papier. */
.kh-mer { fill: #d8c9a4; }
.kh-vague { fill: none; stroke: #a8946a; stroke-width: 1; opacity: 0.7; }
.kh-terre { fill: url(#kh-terre); filter: url(#kh-grain); }
.kh-terre--loin { opacity: 0.75; }
.kh-cote-halo { fill: none; stroke: #b9a67c; stroke-width: 9; opacity: 0.35; stroke-linejoin: round; }
.kh-cote { fill: none; stroke: var(--kh-sepia); stroke-width: 1.6; stroke-linejoin: round; }
.kh-loin { font: 500 12px var(--kh-font-caps); fill: var(--kh-sepia); opacity: 0.6; letter-spacing: 0.1em; }
.kh-pic { fill: none; stroke: #5a4325; stroke-width: 1.3; stroke-linejoin: round; }
.kh-pic-ombre { fill: #8b7148; opacity: 0.45; }
.kh-relief { font: 500 11px var(--kh-font-caps); fill: #5a4325; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.8; }
.kh-dune { fill: none; stroke: #b29a68; stroke-width: 1.2; }
.kh-oueds path { fill: none; stroke: #6c7a8a; stroke-width: 1.4; opacity: 0.75; }
.kh-oued { font: italic 500 12px var(--kh-font-display); fill: #4e5d70; }
.kh-mer-t { font: 600 22px var(--kh-font-caps); fill: #6b5a3a; letter-spacing: 0.32em; opacity: 0.55; }
.kh-mer-t--petit { font-size: 15px; }
.kh-sahra { font: 600 30px var(--kh-font-caps); fill: #8b7148; letter-spacing: 0.5em; opacity: 0.45; }
.kh-tropique { stroke: #8b7148; stroke-width: 1; stroke-dasharray: 8 6; opacity: 0.6; }
.kh-tropique-t { font: italic 500 12px var(--kh-font-display); fill: #6b5a3a; }
.kh-route { fill: none; stroke: #7a3c22; stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; opacity: 0.75; }
.kh-rose circle { fill: none; stroke: var(--kh-sepia); stroke-width: 1; opacity: 0.8; }
.kh-rose-a { fill: var(--kh-sepia); }
.kh-rose-b { fill: #b8862a; }
.kh-rose-t { font: 600 16px var(--kh-font-caps); fill: var(--kh-sepia); }
.kh-rose-ar { font: 700 15px var(--kh-font-ar); fill: #8a5a12; }
.kh-orne path { fill: none; stroke: var(--kh-sepia); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0.8; }
.kh-orne circle { fill: var(--kh-sepia); }
.kh-orne--caravane path { stroke-width: 1.2; }

/* Les villes. */
.kh-ville { cursor: pointer; outline: none; }
.kh-ville-halo { fill: #f4ecd6; stroke: none; opacity: 0.9; }
.kh-ville-anneau { fill: none; stroke: var(--kh-anneau, #b8862a); stroke-width: 3; }
.kh-ville-anneau2 { fill: none; stroke: var(--kh-sepia); stroke-width: 1; opacity: 0.7; }
.kh-ville-nom { font: 600 15px var(--kh-font-caps); fill: var(--kh-sepia); letter-spacing: 0.08em; paint-order: stroke; stroke: #f4ecd6; stroke-width: 5px; stroke-linejoin: round; }
.kh-ville-ar { font: 700 13px var(--kh-font-ar); fill: #8a5a12; paint-order: stroke; stroke: #f4ecd6; stroke-width: 4px; }
.kh-ville:hover .kh-ville-anneau, .kh-ville:focus-visible .kh-ville-anneau, .kh-ville.est-ouvert .kh-ville-anneau { stroke: var(--kh-emerald-deep); stroke-width: 4; }

/* Les enseignes. */
.kh-pin { cursor: pointer; outline: none; transition: opacity 0.25s var(--kh-ease); }
.kh-pin-fond { fill: #f7f0dc; stroke: var(--kh-sepia); stroke-width: 1.3; }
.kh-pin--rangs .kh-pin-fond { stroke: #a3660f; stroke-width: 2; }
.kh-pin--lieux .kh-pin-fond { stroke: #14684f; stroke-width: 2; }
.kh-pin--gens .kh-pin-fond { stroke: #b5532f; stroke-width: 2; }
.kh-pin--liens .kh-pin-fond { stroke: #3b4d9c; stroke-width: 2; }
.kh-pin--figures .kh-pin-fond { stroke: #8a2b3c; stroke-width: 1.8; fill: #fbf3df; }
.kh-pin-nom { font: 600 10.5px var(--kh-font-caps); fill: var(--kh-sepia); letter-spacing: 0.06em; paint-order: stroke; stroke: #f4ecd6; stroke-width: 4px; stroke-linejoin: round; }
.kh-pin--figures .kh-pin-nom { font-size: 9.5px; }
.kh-pin-date { font: italic 500 10px var(--kh-font-display); fill: #8a2b3c; paint-order: stroke; stroke: #f4ecd6; stroke-width: 3px; }
.kh-pin:hover .kh-pin-fond, .kh-pin:focus-visible .kh-pin-fond, .kh-pin.est-ouvert .kh-pin-fond { fill: #fff8e6; stroke-width: 3; }
.kh-pin:hover, .kh-pin.est-ouvert { filter: drop-shadow(0 4px 6px rgba(59, 42, 18, 0.35)); }
.kh-pin.est-eteint { opacity: 0.18; }

/* Le cartouche, l'échelle, la légende. */
.kh-cartouche rect { fill: #f7f0dc; stroke: var(--kh-sepia); stroke-width: 1.2; }
.kh-cartouche rect + rect { fill: none; stroke: #b8862a; stroke-width: 1; }
.kh-cart-sur { font: 500 11px var(--kh-font-caps); fill: #8a5a12; letter-spacing: 0.3em; }
.kh-cart-titre { font: 700 36px var(--kh-font-display); fill: var(--kh-sepia); }
.kh-cart-sous { font: italic 500 15px var(--kh-font-display); fill: #5c5138; }
.kh-cart-ar { font: 700 17px var(--kh-font-ar); fill: #8a5a12; }
.kh-echelle path { stroke: var(--kh-sepia); stroke-width: 1.2; fill: none; }
.kh-echelle text { font: italic 500 12px var(--kh-font-display); fill: #5c5138; }
.kh-legende rect { fill: rgba(247, 240, 220, 0.92); stroke: var(--kh-sepia); stroke-width: 1; }
.kh-leg-t { font: 600 13px var(--kh-font-caps); fill: var(--kh-sepia); letter-spacing: 0.14em; text-transform: uppercase; }
.kh-leg-f { fill: #f7f0dc; stroke-width: 2.2; }
.kh-leg-n { font: 500 13px var(--kh-font-body); fill: var(--kh-ink-dark); }
.kh-leg-ar { font: 700 13px var(--kh-font-ar); fill: #8a5a12; }
.kh-leg-note { font: italic 500 12px var(--kh-font-display); fill: #5c5138; }
.kh-vignette { fill: url(#kh-vignette); pointer-events: none; }
.kh-bord { fill: none; stroke: #b8862a; stroke-width: 1.2; opacity: 0.8; pointer-events: none; }

/* La fiche qui s'ouvre. */
.kh-tip {
  position: absolute; z-index: 6; width: min(380px, 78vw); pointer-events: auto;
  background: linear-gradient(180deg, #fbf4e2, #f1e5c8); color: var(--kh-ink-dark);
  border: 1px solid #b8862a; border-radius: 10px; padding: 16px 18px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), inset 0 0 0 3px #fbf4e2, inset 0 0 0 4px rgba(184, 134, 42, 0.5);
}
.kh-fiche header { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; }
.kh-fiche-ico { width: 46px; height: 46px; flex: none; border: 2px solid currentColor; border-radius: 50%; display: grid; place-items: center; background: #fff8e6; }
.kh-fiche-ico--etoile { border-radius: 4px; transform: rotate(45deg); }
.kh-fiche-ico--etoile .kh-ico { transform: rotate(-45deg); }
.kh-fiche-ico .kh-ico { width: 28px; height: 28px; }
.kh-fiche-portrait img { width: 56px; height: 56px; border-radius: 50%; border: 2px solid #b8862a; object-fit: cover; }
.kh-fiche-fam { font: 500 0.62rem var(--kh-font-caps); letter-spacing: 0.18em; text-transform: uppercase; color: #8a5a12; }
.kh-fiche h3 { font-size: 1.35rem; color: var(--kh-ink-dark); margin: 2px 0 0; }
.kh-fiche h3 .ar { font-size: 0.85em; color: #a3660f; margin-left: 6px; }
.kh-fiche-sous { font: italic 500 0.98rem var(--kh-font-display); color: #6b3f0a; }
.kh-fiche dl { display: grid; gap: 8px; }
.kh-fiche dt { font: 500 0.6rem var(--kh-font-caps); letter-spacing: 0.18em; text-transform: uppercase; color: #8a5a12; }
.kh-fiche dd, .kh-fiche-txt { font-size: 0.86rem; line-height: 1.5; color: var(--kh-ink-dark); }
.kh-fiche-src { margin-top: 8px; font-size: 0.74rem; color: var(--kh-ink-dark-soft); border-top: 1px dashed rgba(36, 28, 14, 0.3); padding-top: 8px; }
.kh-fiche-src b { color: #8a5a12; font-weight: 600; }

/* ---- Le brouillard de Nsyan (le jeu) : une ville pas encore retrouvée ---- */
.kh-ville--effacee image { filter: grayscale(1) blur(1.5px); opacity: 0.35; }
.kh-ville--effacee .kh-ville-anneau { stroke: #8b7148; stroke-dasharray: 3 5; stroke-width: 2; }
.kh-ville--effacee .kh-ville-nom, .kh-ville--effacee .kh-ville-ar { opacity: 0.5; }
.kh-ville--effacee .kh-ville-halo { fill: #d8c9a4; opacity: 0.6; }
.kh-nsyan { fill: #3b2a12; opacity: 0.08; pointer-events: none; }
.kh-ville-effacee-t { font: italic 500 11px var(--kh-font-display); fill: #6b5a3a; paint-order: stroke; stroke: #f4ecd6; stroke-width: 4px; }

/* ---- Ce qu'une maison cliente peut poser sur une ville (zawia-kharita.js,
   `sous` et `decale`) : la Kharita de Zawia n'en a pas, rien ne change pour elle. ---- */
.kh-ville-sous { font: italic 600 12.5px var(--kh-font-display); fill: #5c5138; paint-order: stroke; stroke: #f4ecd6; stroke-width: 4px; stroke-linejoin: round; }
.kh-ville-fil { stroke: var(--kh-sepia); stroke-width: 1.4; stroke-dasharray: 3 3; opacity: 0.7; }
.kh-ville-point { fill: var(--kh-anneau, #b8862a); stroke: #f4ecd6; stroke-width: 2; }
.kh-ville--effacee .kh-ville-sous { opacity: 0.55; }
.kh-ville--effacee .kh-ville-fil { opacity: 0.4; }
.kh-ville--effacee .kh-ville-point { fill: #8b7148; }

/* ---- La fiche d'une ville, dans le jeu ---- */
.kh-fiche-pages { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.kh-fiche-pages li { font-size: 0.82rem; line-height: 1.4; color: var(--kh-ink-dark); padding-left: 18px; position: relative; }
.kh-fiche-pages li::before { content: "◇"; position: absolute; left: 0; color: #8b7148; }
.kh-fiche-pages li.est-retrouvee::before { content: "◆"; color: #8a2b3c; }
.kh-fiche-pages li.est-a-venir { color: var(--kh-ink-dark-soft); font-style: italic; }
.kh-fiche-mots { margin-top: 8px; font-size: 0.8rem; color: var(--kh-ink-dark-soft); }
.kh-fiche-etat { display: inline-block; margin-top: 6px; font: 500 0.6rem var(--kh-font-caps); letter-spacing: 0.16em; text-transform: uppercase; color: #14684f; border: 1px solid rgba(20, 104, 79, 0.4); border-radius: 999px; padding: 3px 9px; }
.kh-fiche-etat--a-batir { color: #8a5a12; border-color: rgba(138, 90, 18, 0.4); }