/* Carte interactive de Westeros et Essos — leslecturesdevi.fr
   S'appuie sur les variables du design system « Papier Libre » (--paper,
   --ink, --cinabre, --font-title…) et retombe sur des valeurs littérales
   quand elles ne sont pas définies. Le thème gère un mode sombre : chaque
   couleur propre à la carte en a une variante. */

.lvi-got {
  /* couleurs de la carte, mode clair */
  --got-sea: #cddbe0;
  --got-sea-deep: #b9cbd2;
  --got-land: #ece0c6;
  --got-coast: #9a8862;
  --got-forest: #b9c6a4;
  --got-mountain: #cfc3a8;
  --got-desert: #e8d9ae;
  --got-swamp: #b6bd9c;
  --got-river: #7fa3b5;
  --got-road: #a08a63;
  --got-wall: #eef5f8;
  --got-wall-edge: #7fa8bd;
  --got-panel: var(--paper, #f4efe6);
  --got-panel-alt: var(--paper-dim, #ece5d8);
  --got-line: var(--paper-dark, #e2d9c8);
  --got-text: var(--ink, #1a1815);
  --got-muted: var(--ink-soft, #3d3830);
  --got-accent: var(--cinabre, #a33b1f);
  --got-shadow: rgba(26, 24, 21, .14);

  --got-title: var(--font-title, 'Cormorant Garamond', Georgia, serif);
  --got-body: var(--font-body, 'Source Serif 4', Georgia, serif);
  --got-mono: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);

  margin: 2.5rem 0;
  font-family: var(--got-body);
  color: var(--got-text);
}

@media (prefers-color-scheme: dark) {
  .lvi-got {
    --got-sea: #131b21;
    --got-sea-deep: #0e161b;
    --got-land: #2c2620;
    --got-coast: #6b5f4a;
    --got-forest: #2f3a2c;
    --got-mountain: #3a342a;
    --got-desert: #3b3427;
    --got-swamp: #2c332a;
    --got-river: #4a6f83;
    --got-road: #6d5c41;
    --got-wall: #cfe2ea;
    --got-wall-edge: #5b8296;
    --got-shadow: rgba(0, 0, 0, .45);
  }
}

/* Le gabarit d'article est étroit (900 px, sidebar à droite). On reprend de la
   largeur, mais la marge exacte est mesurée à l'exécution : une valeur figée
   déborderait de la fenêtre dès que le conteneur touche son bord. */
.lvi-got--wide {
  margin-left: calc(-1 * var(--got-bleed-left, 0px));
  margin-right: calc(-1 * var(--got-bleed-right, 0px));
}

.lvi-got__frame {
  border: 1px solid var(--got-line);
  background: var(--got-panel);
  box-shadow: 0 1px 3px var(--got-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* --- barre supérieure ---------------------------------------------------- */

.lvi-got__bar {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .625rem;
  background: var(--got-panel-alt);
  border-bottom: 1px solid var(--got-line);
  flex-wrap: wrap;
}

.lvi-got__search {
  position: relative;
  flex: 1 1 180px;
  min-width: 0;
}

.lvi-got__search input {
  width: 100%;
  padding: .45rem .625rem;
  font: 400 14px/1.3 var(--got-body);
  color: var(--got-text);
  background: var(--got-panel);
  border: 1px solid var(--got-line);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}

.lvi-got__search input:focus {
  outline: 2px solid var(--got-accent);
  outline-offset: -2px;
}

.lvi-got__results {
  position: absolute;
  z-index: 1200;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  max-height: 17rem;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--got-panel);
  border: 1px solid var(--got-line);
  box-shadow: 0 4px 14px var(--got-shadow);
}

.lvi-got__results:empty { display: none; }

.lvi-got__results button {
  display: block;
  width: 100%;
  text-align: left;
  padding: .4rem .625rem;
  font: 400 14px/1.35 var(--got-body);
  color: var(--got-text);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--got-line);
  cursor: pointer;
}

.lvi-got__results li:last-child button { border-bottom: 0; }
.lvi-got__results button:hover,
.lvi-got__results button:focus,
.lvi-got__results [aria-selected="true"] button { background: var(--got-panel-alt); }

.lvi-got__results em {
  display: block;
  font: 400 11px/1.4 var(--got-mono);
  font-style: normal;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--got-muted);
  opacity: .8;
}

.lvi-got__tools { display: flex; gap: .375rem; margin-left: auto; }

/* Les panneaux sont visibles en permanence sur grand écran : les boutons
   d'ouverture ne servent que lorsqu'ils deviennent des tiroirs. */
.lvi-got__btn--drawer { display: none; }

.lvi-got__btn {
  padding: .4rem .7rem;
  font: 500 11px/1.4 var(--got-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--got-muted);
  background: var(--got-panel);
  border: 1px solid var(--got-line);
  cursor: pointer;
  white-space: nowrap;
}

.lvi-got__btn:hover { color: var(--got-accent); border-color: var(--got-accent); }
.lvi-got__btn[aria-pressed="true"] { color: var(--got-panel); background: var(--got-accent); border-color: var(--got-accent); }

/* --- corps --------------------------------------------------------------- */

.lvi-got__body {
  position: relative;
  display: flex;
  min-height: 0;
  height: clamp(420px, 68vh, 660px);
}

.lvi-got__map {
  flex: 1;
  min-width: 0;
  background: var(--got-sea);
}

.lvi-got__map:focus-visible { outline: 2px solid var(--got-accent); outline-offset: -2px; }

.lvi-got__panel {
  width: 15rem;
  flex: 0 0 15rem;
  overflow-y: auto;
  padding: .875rem;
  background: var(--got-panel);
  border-right: 1px solid var(--got-line);
}

.lvi-got__panel--info {
  border-right: 0;
  border-left: 1px solid var(--got-line);
  width: 17rem;
  flex-basis: 17rem;
}

.lvi-got__group + .lvi-got__group { margin-top: 1.125rem; }

.lvi-got__group > h4 {
  margin: 0 0 .5rem;
  font: 500 10px/1.4 var(--got-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--got-muted);
  opacity: .85;
}

.lvi-got__check {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .2rem 0;
  font-size: 14px;
  line-height: 1.35;
  cursor: pointer;
}

.lvi-got__check input { flex: 0 0 auto; accent-color: var(--got-accent); margin: 0; }
.lvi-got__check span { flex: 1; min-width: 0; }

.lvi-got__swatch {
  flex: 0 0 auto;
  width: .75rem;
  height: .75rem;
  border: 1px solid var(--got-coast);
}

.lvi-got__count {
  font: 400 10px/1 var(--got-mono);
  color: var(--got-muted);
  opacity: .7;
}

/* --- fiche --------------------------------------------------------------- */

.lvi-got__info-empty { font-size: 14px; line-height: 1.6; color: var(--got-muted); }

.lvi-got__info h3 {
  margin: 0 0 .125rem;
  font: 500 22px/1.2 var(--got-title);
  color: var(--got-text);
}

.lvi-got__info-alt {
  margin: 0 0 .625rem;
  font: 400 12px/1.4 var(--got-mono);
  color: var(--got-muted);
  opacity: .85;
}

.lvi-got__tag {
  display: inline-block;
  margin: 0 .25rem .375rem 0;
  padding: .125rem .4rem;
  font: 500 10px/1.5 var(--got-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--got-muted);
  border: 1px solid var(--got-line);
}

.lvi-got__tag--speculative { color: var(--got-accent); border-color: var(--got-accent); }

.lvi-got__info dl { margin: .75rem 0 0; font-size: 14px; line-height: 1.55; }
.lvi-got__info dt {
  font: 500 10px/1.6 var(--got-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--got-muted);
  opacity: .8;
}
.lvi-got__info dd { margin: 0 0 .625rem; }

.lvi-got__info-note {
  margin-top: .875rem;
  padding-top: .75rem;
  border-top: 1px solid var(--got-line);
  font-size: 13px;
  line-height: 1.6;
  color: var(--got-muted);
}

/* --- frise chronologique -------------------------------------------------- */

.lvi-got__timeline {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .625rem .75rem;
  background: var(--got-panel-alt);
  border-top: 1px solid var(--got-line);
  flex-wrap: wrap;
}

.lvi-got__timeline label {
  font: 500 10px/1.4 var(--got-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--got-muted);
}

.lvi-got__timeline input[type="range"] {
  flex: 1 1 10rem;
  min-width: 8rem;
  accent-color: var(--got-accent);
}

.lvi-got__season {
  min-width: 8.5rem;
  font: 500 12px/1.4 var(--got-mono);
  color: var(--got-text);
}

/* --- marqueurs et étiquettes ---------------------------------------------- */

.lvi-got .leaflet-container {
  background: var(--got-sea);
  font-family: var(--got-body);
}

.lvi-got__label {
  font: 400 11px/1.2 var(--got-title);
  font-style: italic;
  letter-spacing: .06em;
  color: var(--got-coast);
  text-shadow: 0 0 3px var(--got-land), 0 0 3px var(--got-land);
  white-space: nowrap;
  pointer-events: none;
}

.lvi-got__label--sea {
  color: var(--got-river);
  text-shadow: 0 0 3px var(--got-sea), 0 0 3px var(--got-sea);
}

.lvi-got__label--place {
  font-family: var(--got-body);
  font-style: normal;
  font-size: 11px;
  color: var(--got-text);
  text-shadow: 0 0 3px var(--got-land), 0 0 2px var(--got-land);
  transform: translateX(.4rem);
}

.lvi-got__step {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  font: 500 10px/1 var(--got-mono);
  color: #fff;
  border: 2px solid var(--got-panel);
  box-shadow: 0 1px 3px var(--got-shadow);
}

.lvi-got .leaflet-popup-content-wrapper {
  border-radius: 0;
  background: var(--got-panel);
  color: var(--got-text);
  box-shadow: 0 2px 10px var(--got-shadow);
}

.lvi-got .leaflet-popup-tip { background: var(--got-panel); }
.lvi-got .leaflet-popup-content { margin: .625rem .75rem; font-size: 13px; line-height: 1.5; }
.lvi-got .leaflet-popup-content strong { font: 500 15px/1.3 var(--got-title); display: block; }

.lvi-got .leaflet-bar a {
  background: var(--got-panel);
  color: var(--got-text);
  border-bottom-color: var(--got-line);
}

.lvi-got .leaflet-bar a:hover { background: var(--got-panel-alt); }
.lvi-got .leaflet-control-attribution { display: none; }

/* --- état de chargement --------------------------------------------------- */

.lvi-got__loader {
  position: absolute;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  background: var(--got-sea);
  font: 500 11px/1.4 var(--got-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--got-muted);
}

.lvi-got__loader[hidden] { display: none; }

/* --- plein écran ---------------------------------------------------------- */

.lvi-got__frame:fullscreen { border: 0; }
.lvi-got__frame:fullscreen .lvi-got__body { height: auto; flex: 1; }

/* --- crédits -------------------------------------------------------------- */

.lvi-got__credits {
  margin: .625rem 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--got-muted);
}

.lvi-got__credits a { color: inherit; text-decoration: underline; }

/* --- repli sans JavaScript ------------------------------------------------ */

.lvi-got__noscript {
  padding: 1.25rem;
  border: 1px solid var(--got-line);
  background: var(--got-panel-alt);
}

.lvi-got__noscript ul { columns: 2; column-gap: 2rem; font-size: 14px; }

/* --- mobile --------------------------------------------------------------- */

@media (max-width: 860px) {
  .lvi-got__body { height: clamp(380px, 60vh, 520px); }

  .lvi-got__btn--drawer { display: inline-block; }

  .lvi-got__panel {
    position: absolute;
    z-index: 1100;
    top: 0;
    bottom: 0;
    width: min(16rem, 82%);
    flex-basis: auto;
    box-shadow: 0 0 20px var(--got-shadow);
    transition: transform .18s ease-out;
  }

  .lvi-got__panel--layers { left: 0; transform: translateX(-101%); }
  .lvi-got__panel--info { right: 0; transform: translateX(101%); }
  .lvi-got__panel[data-open="true"] { transform: translateX(0); }

  .lvi-got__noscript ul { columns: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .lvi-got__panel { transition: none; }
}