/* Carte interactive de Vesperae (page Géographie). Couleurs des repères : variables --c ci-dessous. */

.cm {
  --c-ville: #e0a81f; --c-village: #45a552; --c-site: #d0402f; --c-region: #8a5ad6;
  position: relative; display: grid; grid-template-columns: 270px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
  height: clamp(560px, 82vh, 900px); margin: 20px -14px 30px;
  background: #16120a; border: 3px solid #3b2a10; border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 10px 26px rgba(30, 20, 4, .5), inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.cm[data-carte], .cm-carte, .cm-menu { min-height: 0; }

/* ---- Zone de carte ---------------------------------------------------------------------- */
.cm-carte { position: relative; overflow: hidden; min-width: 0; }
.cm-vue {
  position: absolute; inset: 0; overflow: hidden; cursor: grab; touch-action: none; outline: none;
  background: radial-gradient(ellipse at center, #2c556b 0%, #1b3444 100%);
}
.cm-vue.deplace { cursor: grabbing; }
.cm-vue:focus-visible { box-shadow: inset 0 0 0 3px rgba(224, 184, 92, .8); }
.cm-monde { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.cm-img { display: block; width: 100%; height: 100%; max-width: none; user-select: none; -webkit-user-drag: none; pointer-events: none; opacity: 1; transition: opacity .3s; }
.cm-charge .cm-img { opacity: 0; }

/* Repères : un losange (comme l'ornement des titres), taille constante à l'écran grâce à --inv */
.cm-repere {
  position: absolute; width: 0; height: 0; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; z-index: 2;
  --c: var(--c-site); transform: scale(var(--inv, 1)); transform-origin: 0 0;
}
.cm-repere[data-cat="ville"] { --c: var(--c-ville); }
.cm-repere[data-cat="village"] { --c: var(--c-village); }
.cm-repere[data-cat="site"] { --c: var(--c-site); }
.cm-repere[data-cat="region"] { --c: var(--c-region); }
.cm-repere[hidden] { display: none; }
.cm-pin {
  position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; transform: rotate(45deg);
  background: var(--c); border: 2px solid #23180a; border-radius: 2px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .8), 0 3px 7px rgba(0, 0, 0, .7);
  transition: transform .15s, box-shadow .15s;
}
.cm-repere[data-cat="region"] .cm-pin { border-radius: 50%; transform: none; width: 20px; height: 20px; left: -10px; top: -10px; border-style: dashed; }
/* Ville avec un temple principal : le logo du dieu dans le losange (icône remise droite, recadrée en carré) */
.cm-pin-dieu {
  position: absolute; left: 50%; top: 50%; width: 13px; height: 13px; transform: translate(-50%, -50%) rotate(-45deg);
  object-fit: cover; object-position: top; border-radius: 1px; pointer-events: none;
}
/* Race principale du territoire : petite icône posée à côté du losange (même sprite que le calque « personnages des races ») */
.cm-pin-race {
  position: absolute; left: 9px; top: -13px; width: 13px; height: auto; image-rendering: pixelated;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .8)) drop-shadow(0 0 1px #fff); pointer-events: none;
}
/* Lieu souterrain (Dro'Xun, Mini'Coin…) : un petit repère discret sous le losange plutôt que de charger le losange lui-même */
.cm-repere[data-souterrain="1"]::after {
  content: ""; position: absolute; left: -5px; top: 11px; width: 10px; height: 5px; border-radius: 0 0 8px 8px;
  background: repeating-linear-gradient(135deg, #6b4a2a, #6b4a2a 2px, #3b2a10 2px, #3b2a10 4px);
  box-shadow: 0 0 0 1.5px #fff, 0 2px 3px rgba(0, 0, 0, .6); pointer-events: none;
}
.cm-repere:hover .cm-pin, .cm-repere.survol .cm-pin, .cm-repere:focus-visible .cm-pin { transform: rotate(45deg) scale(1.3); box-shadow: 0 0 0 3px #fff, 0 4px 10px rgba(0, 0, 0, .8); }
.cm-repere[data-cat="region"]:hover .cm-pin, .cm-repere[data-cat="region"].survol .cm-pin { transform: scale(1.3); }
.cm-repere:focus-visible { outline: none; }
.cm-repere.choisi { z-index: 4; }
.cm-repere.choisi .cm-pin { transform: rotate(45deg) scale(1.45); box-shadow: 0 0 0 3px #fff, 0 0 0 7px rgba(255, 255, 255, .35), 0 4px 12px rgba(0, 0, 0, .8); animation: cm-pulse 1.6s ease-out infinite; }
.cm-repere.choisi[data-cat="region"] .cm-pin { transform: scale(1.45); }
@keyframes cm-pulse { 50% { box-shadow: 0 0 0 3px #fff, 0 0 0 13px rgba(255, 255, 255, 0), 0 4px 12px rgba(0, 0, 0, .8); } }

.cm-nom {
  position: absolute; left: 15px; top: -10px; padding: 1px 6px; white-space: nowrap; pointer-events: none;
  font: 700 12px/1.5 Georgia, "Times New Roman", serif; color: #fff; background: rgba(20, 14, 6, .82);
  border: 1px solid rgba(255, 255, 255, .35); border-radius: 2px; opacity: 0; transform: translateX(-4px);
  transition: opacity .12s, transform .12s;
}
.cm-repere:hover .cm-nom, .cm-repere.survol .cm-nom, .cm-repere:focus-visible .cm-nom, .cm-repere.choisi .cm-nom,
.cm-avec-noms .cm-nom { opacity: 1; transform: none; }
.cm-repere:hover, .cm-repere.survol { z-index: 5; }

/* Onglets et outils */
.cm-onglets { position: absolute; left: 10px; top: 10px; display: flex; gap: 6px; z-index: 6; }
.cm-onglet, .cm-btn {
  font: 700 13px Helvetica, Arial, sans-serif; color: #f6f2e2; cursor: pointer;
  background: linear-gradient(#6d6650, #453f2d); border: 1px solid #1c150a; border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 2px 5px rgba(0, 0, 0, .5);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .6); transition: transform .12s, background .12s;
}
.cm-onglet { padding: 7px 14px; }
.cm-onglet:hover, .cm-btn:hover { background: linear-gradient(#857d62, #574f38); transform: translateY(-1px); }
.cm-onglet.actif { background: linear-gradient(#3a3524, #574f38); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .55), inset 0 -2px 0 #e0b85c; }
.cm-outils { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; gap: 6px; z-index: 6; }
.cm-btn { width: 38px; height: 38px; font-size: 20px; line-height: 1; padding: 0; }
.cm-astuce {
  position: absolute; left: 50%; bottom: 14px; transform: translate(-50%, 8px); z-index: 7; max-width: 90%;
  padding: 7px 14px; font: 13px Helvetica, Arial, sans-serif; color: #fff; background: rgba(20, 14, 6, .9);
  border: 1px solid rgba(255, 255, 255, .3); border-radius: 3px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.cm-astuce.visible { opacity: 1; transform: translate(-50%, 0); }

/* ---- Fiche d'un lieu ---------------------------------------------------------------------- */
.cm-fiche {
  position: absolute; left: 10px; bottom: 10px; z-index: 8; width: min(350px, calc(100% - 20px)); max-height: calc(100% - 70px);
  overflow-y: auto; padding: 16px 18px 16px; color: var(--encre, #15110a);
  background: linear-gradient(#efe6c7, #dccf9f); box-shadow: 0 10px 28px rgba(0, 0, 0, .6);
  animation: cm-entree .25s ease-out;
}
.cm-fiche[hidden] { display: none; }
@keyframes cm-entree { from { opacity: 0; transform: translateY(10px); } }
.cm-fiche::after, .cm-fermer { }
.cm-fiche-corps { position: relative; z-index: 1; }
.cm-fiche-img {
  display: block; width: 100%; height: auto; max-height: 190px; object-fit: cover; margin: 0 0 12px;
  border: 3px solid rgba(255, 252, 240, .7); box-shadow: 0 2px 8px rgba(40, 25, 5, .5);
}
.cm-fiche h3 { margin: 0 24px 2px 0; padding: 0; border: 0; font: 400 30px/1.1 "Pinyon Script", "Snell Roundhand", cursive; text-shadow: 1px 1px 0 rgba(255, 255, 255, .6); }
.cm-fiche-meta { margin: 0 0 10px !important; font: italic 12px Georgia, serif; color: #5b4a25; text-align: left !important; }
.cm-fiche p { margin: 0 0 10px; font-size: 14px; line-height: 1.45; text-align: left !important; hyphens: manual; }
.cm-fiche-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0 !important; }
.cm-lien {
  display: inline-block; padding: 6px 12px; font: 700 12px Helvetica, Arial, sans-serif; color: #fff !important; text-decoration: none;
  background: linear-gradient(#7d7861, #57533f); border: 1px solid #1c150a; border-radius: 3px; cursor: pointer;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 2px 4px rgba(0, 0, 0, .35);
}
.cm-lien:hover, .cm-lien:focus-visible { background: linear-gradient(#948d70, #665f47); }
.cm-fermer { position: absolute; right: 12px; top: 12px; z-index: 3; width: 28px; height: 28px; font-size: 18px; }

/* ---- Colonne de gauche : recherche, filtres, liste ------------------------------------------ */
.cm-menu {
  display: flex; flex-direction: column; gap: 8px; padding: 12px 12px 10px; min-width: 0;
  background: linear-gradient(#e9e0c4, #d8ca9d); border-right: 3px solid #3b2a10;
}
.cm-recherche {
  width: 100%; padding: 8px 10px; font: 14px Helvetica, Arial, sans-serif; color: #15110a;
  background: rgba(255, 255, 255, .55); border: 1px solid rgba(60, 40, 10, .55); border-radius: 3px;
  box-shadow: inset 0 2px 4px rgba(60, 40, 10, .25);
}
.cm-recherche:focus { outline: 2px solid #e0b85c; }
.cm-puces { display: flex; flex-wrap: wrap; gap: 5px; }
.cm-puce {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; font: 700 11px Helvetica, Arial, sans-serif; cursor: pointer;
  color: #15110a; background: linear-gradient(rgba(255, 253, 240, .8), rgba(214, 198, 150, .6));
  border: 1px solid rgba(60, 40, 10, .5); border-radius: 3px; box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(0, 0, 0, .25);
}
.cm-puce[aria-pressed="true"] { color: #fff; background: linear-gradient(#7d7861, #57533f); text-shadow: 0 1px 1px rgba(0, 0, 0, .6); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .45); }
.cm-option { font-size: 12px; cursor: pointer; user-select: none; }
.cm-compteur { margin: 0 !important; font: italic 12px Georgia, serif; color: #5b4a25; text-align: left !important; }
.cm-liste { flex: 1; min-height: 0; margin: 0; padding: 0; list-style: none; overflow-y: auto; border-top: 1px solid rgba(60, 40, 10, .3); }
.cm-liste li { margin: 0; }
.cm-liste li[hidden] { display: none; }
.cm-item {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; text-align: left; cursor: pointer;
  font: 14px Helvetica, Arial, sans-serif; color: #15110a; background: none; border: 0; border-left: 3px solid transparent;
  border-bottom: 1px solid rgba(60, 40, 10, .12); transition: background .1s, border-color .1s;
}
.cm-item:hover, .cm-item.survol { background: rgba(255, 255, 255, .5); border-left-color: #e0b85c; }
.cm-item.actif { background: rgba(255, 255, 255, .7); border-left-color: #8a5a12; font-weight: 700; }
.cm-item-note { margin-left: auto; font: italic 11px Georgia, serif; color: #7a6a44; }
.cm-point, .cm-puce .cm-point {
  flex: none; width: 10px; height: 10px; background: var(--c-site); border: 1px solid #23180a; transform: rotate(45deg);
}
[data-cat="ville"] > .cm-point { background: var(--c-ville); }
[data-cat="village"] > .cm-point { background: var(--c-village); }
[data-cat="site"] > .cm-point { background: var(--c-site); }
[data-cat="region"] > .cm-point { background: var(--c-region); border-radius: 50%; transform: none; }

/* Plein écran */
.cm-plein, .cm:fullscreen { position: fixed; inset: 0; z-index: 1000; height: 100vh; margin: 0; border-radius: 0; }
.cm:fullscreen { width: 100vw; }
.cm-edition .cm-vue { cursor: crosshair; }
.cm-edition::before { content: "MODE ÉDITION"; position: absolute; right: 60px; top: 10px; z-index: 9; padding: 4px 8px; font: 700 11px Helvetica, sans-serif; color: #fff; background: #b3261e; border-radius: 3px; }

/* ---- Version texte (sans JavaScript) -------------------------------------------------------- */
.lieux-texte article { margin: 0 0 1.2em; }
.lieux-texte h3 { margin-top: 1em; }

/* ---- Mobile --------------------------------------------------------------------------------- */
@media (max-width: 820px) {
  .cm { grid-template-columns: 1fr; grid-template-rows: 68vh auto; height: auto; margin: 16px -8px 24px; }
  .cm-carte { order: -1; }
  .cm-menu { border-right: 0; border-top: 3px solid #3b2a10; }
  .cm-liste { max-height: 260px; }
  .cm-fiche { left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 62%; }
  .cm-fiche h3 { font-size: 26px; }
  .cm-fiche-img { max-height: 130px; }
  .cm-plein, .cm:fullscreen { grid-template-rows: 1fr 0; }
  .cm-plein .cm-menu, .cm:fullscreen .cm-menu { display: none; }
}

/* Bord de parchemin pixellisé de la fiche (même recette que le reste du site) */
.cm-fiche::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; border: 16px solid transparent;
  border-image: url("/assets/img/panneau-parchemin.png") 8 / 16px repeat; image-rendering: pixelated;
  mix-blend-mode: multiply; filter: grayscale(.45) sepia(.75) saturate(.55) brightness(.9) contrast(1.05);
}
.cm-fiche { padding: 26px 28px 22px; }
.cm-fermer { right: 20px; top: 20px; }
@media (prefers-reduced-motion: reduce) { .cm-fiche, .cm-repere.choisi .cm-pin { animation: none; } }

/* ---- Pas de sélection de l'image ni du texte quand on déplace la carte ------------------------ */
.cm-carte, .cm-vue, .cm-monde, .cm-repere, .cm-nom { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.cm-img, .cm-royaumes { -webkit-user-drag: none; }
.cm-vue ::selection { background: transparent; }

/* ---- Zones des royaumes (territoires dessinés sur la carte) --------------------------------- */
.cm-royaumes { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; display: none; }
.cm-avec-royaumes .cm-royaumes { display: block; }
.cm-territoire {
  fill: var(--c); fill-opacity: .2; stroke: var(--c); stroke-width: 2.5; stroke-linejoin: round; vector-effect: non-scaling-stroke;
  pointer-events: none; transition: fill-opacity .15s;
}
.cm-avec-royaumes .cm-territoire { pointer-events: visiblePainted; }
.cm-territoire.survol { fill-opacity: .36; }
.cm-territoire.choisi { fill-opacity: .42; stroke-width: 4; filter: drop-shadow(0 0 3px rgba(255, 255, 255, .9)); }
.cm-vue.sur-territoire { cursor: pointer; }
.cm-terr-nom {
  position: absolute; z-index: 2; display: none; transform: translate(-50%, -50%) scale(var(--inv, 1)); transform-origin: 50% 50%;
  padding: 3px 9px 4px; white-space: nowrap; pointer-events: none; font: 700 13px Georgia, serif; letter-spacing: .03em; color: #fff;
  background: rgba(24, 16, 6, .68); border-left: 4px solid var(--c); border-radius: 2px; text-shadow: 0 1px 1px #000;
}
.cm-avec-royaumes .cm-terr-nom { display: block; }
.cm-terr-nom[hidden] { display: none !important; }
.cm-carre { display: inline-block; flex: none; width: 10px; height: 10px; border: 1px solid #23180a; background: var(--c, #8a5a12); }
.cm-puce-zones .cm-carre { background: conic-gradient(#1fb5c9 0 25%, #2f7a3a 0 50%, #8a1f1f 0 75%, #d93030 0); border-radius: 50%; }
.cm-royaumes-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.cm-royaumes-liste[hidden], .cm-royaumes-liste li[hidden] { display: none; }
.cm-royaume-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; font: 700 11px Helvetica, Arial, sans-serif; cursor: pointer;
  color: #15110a; background: linear-gradient(rgba(255, 253, 240, .85), rgba(214, 198, 150, .6)); border: 1px solid rgba(60, 40, 10, .5);
  border-left: 5px solid var(--c); border-radius: 3px; box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(0, 0, 0, .25);
}
.cm-royaume-btn:hover, .cm-royaume-btn:focus-visible { background: #fff6d8; }

/* ---- Races par territoire ------------------------------------------------------------------- */
.cm-bloc-races { display: grid; gap: 6px; }
.cm-bloc-races[hidden] { display: none; }
.cm-races { width: 100%; padding: 6px 8px; font: 13px Helvetica, Arial, sans-serif; color: #15110a; background: rgba(255, 255, 255, .6); border: 1px solid rgba(60, 40, 10, .55); border-radius: 3px; }
.cm-races:focus { outline: 2px solid #e0b85c; }
.cm-race-info { margin: 0 !important; padding: 6px 9px; font-size: 12.5px; line-height: 1.4; text-align: left !important; background: rgba(255, 253, 240, .7); border-left: 4px solid #8a5a12; }
.cm-race-info[hidden] { display: none; }
.cm-territoire.de-race { fill-opacity: .52; stroke-width: 4.5; }
.cm-territoire.hors-race { fill-opacity: .03; stroke-opacity: .22; }
.cm-terr-nom.hors-race { opacity: .3; }
.cm-royaumes-liste li.hors-race { opacity: .4; }
.cm-fiche-etiquette { margin: 8px 0 4px !important; font: 700 11px Helvetica, Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #6b5a2e; }
.cm-fiche-races { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cm-fiche-races a, .cm-fiche-races .cm-race-libre { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 5px; font: 700 12px Helvetica, Arial, sans-serif; color: #15110a; text-decoration: none;
  background: rgba(255, 253, 240, .75); border: 1px solid rgba(60, 40, 10, .45); border-radius: 3px; }
.cm-fiche-races a:hover { background: #fff6d8; }
.cm-fiche-races img { width: 26px; height: auto; image-rendering: pixelated; }

/* ---- Skins des races (personnages posés sur la carte) --------------------------------------- */
.cm-skin { position: absolute; z-index: 2; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; line-height: 0;
  transform: scale(var(--inv, 1)) translate(calc(-50% + var(--dx, 0) * 1px), calc(-100% + var(--dy, 0) * 1px)); transform-origin: 0 0; transition: opacity .15s; }
.cm-skin[hidden] { display: none; }
.cm-skin img { display: block; width: 20px; height: auto; image-rendering: pixelated; pointer-events: none; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .75)) drop-shadow(0 0 1px #fff); }
.cm-skin:hover, .cm-skin:focus-visible { z-index: 6; outline: none; }
.cm-skin:hover img, .cm-skin:focus-visible img { transform: scale(1.7); transform-origin: 50% 100%; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .9)) drop-shadow(0 0 3px #ffd889); }
.cm-skin.hors-race { opacity: .12; }
.cm-skin.de-race img { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .9)) drop-shadow(0 0 4px #fff); }
.cm-point-skin { background: radial-gradient(circle at 50% 35%, #ffd889, #8a5a12); border-radius: 50%; }