:root {
  --c-parchment: #efe4cc;
  --c-ink: #2c2318;
  --c-bronze: #7a5c33;
  --c-bronze-accent: #bc8f56;
  --header-h: 60px;
  --footer-h: 24px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--c-parchment);
}

#carte {
  position: fixed;
  top: var(--header-h);
  right: 0;
  bottom: var(--footer-h);
  left: 0;
  width: auto;
  height: auto;
}

/* ---- Bandeau haut : logo + titre + accès bibliothèque (charte du site) ---- */
.carte-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-h);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-inline: clamp(1rem, 3vw, 1.75rem);
  background: rgba(2, 19, 34, 0.98);
  border-bottom: 1px solid rgba(188, 143, 86, 0.32);
}

.carte-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  color: #f1f0f0;
  text-decoration: none;
}

.carte-brand__mark {
  flex: none;
  width: auto;
  height: 30px;
}

.carte-brand__nom {
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.carte-header__btn {
  flex: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  color: #021322;
  background: #bc8f56;
  border: 1.5px solid #bc8f56;
  border-radius: 999px;
  padding: 8px 18px;
  transition: background 0.15s ease;
}

.carte-header__btn:hover {
  background: #d6ab73;
}

@media (max-width: 560px) {
  .carte-brand__nom { display: none; }
}

/* ---- Pied de page mince (charte du site) ---- */
.carte-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--footer-h);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding-inline: 1rem;
  background: rgba(2, 19, 34, 0.98);
  border-top: 1px solid rgba(188, 143, 86, 0.32);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.7rem;
  color: rgba(241, 240, 240, 0.75);
  text-align: center;
}

/* Texte long (desktop/tablette) vs. condensé (mobile) : deux variantes dans le
   DOM, une seule affichée à la fois — sur une ligne, le pied de page mobile
   n'a plus besoin d'être plus haut que la version desktop. */
.carte-footer__court {
  display: none;
}

@media (max-width: 480px) {
  :root { --footer-h: 20px; }
  .carte-footer {
    font-size: 0.6rem;
    line-height: 1;
    gap: 0.35rem;
    flex-wrap: nowrap;
    white-space: nowrap;
  }
  .carte-footer__full {
    display: none;
  }
  .carte-footer__court {
    display: inline;
  }
}

.carte-footer a {
  color: #bc8f56;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Grain de papier, au-dessus de la carte mais sous la vignette */
#carte::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("paper-texture.svg");
  background-size: 220px 220px;
  mix-blend-mode: multiply;
  opacity: 0.28;
  z-index: 4;
}

/* Vignette léger façon papier ancien, au-dessus de la carte */
#carte::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 min(14vw, 220px) rgba(44, 35, 24, 0.22);
  z-index: 5;
}

.carte-loading {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-parchment);
  color: var(--c-bronze);
  font: italic 500 1rem/1.4 "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  letter-spacing: 0.02em;
  z-index: 10;
  transition: opacity 0.5s ease;
}

.carte-loading[hidden] {
  opacity: 0;
  pointer-events: none;
}

/* ---- Habillage des contrôles MapLibre, teinte parchemin ---- */
.maplibregl-ctrl-top-right {
  top: 14px;
  right: 14px;
}

.maplibregl-ctrl-group {
  background: var(--c-parchment);
  border: 1px solid rgba(122, 92, 51, 0.45);
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(44, 35, 24, 0.18);
  overflow: hidden;
}

.maplibregl-ctrl-group button {
  background: transparent;
}

.maplibregl-ctrl-group button + button {
  border-top: 1px solid rgba(122, 92, 51, 0.3);
}

.maplibregl-ctrl-group button:hover {
  background: rgba(122, 92, 51, 0.12);
}

.maplibregl-ctrl-icon {
  filter: sepia(1) saturate(1.4) hue-rotate(-10deg) brightness(0.85);
}

.maplibregl-ctrl-attrib {
  background: rgba(239, 228, 204, 0.82);
  color: var(--c-ink);
  font: 0.7rem/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.maplibregl-ctrl-attrib a {
  color: var(--c-bronze);
}

.maplibregl-ctrl-bottom-right .maplibregl-ctrl-attrib {
  border-top-left-radius: 4px;
}

/* ---- Points de géolocalisation des modèles ----
   .carte-point = racine du marqueur MapLibre : invisible, jamais mise à l'échelle
   (MapLibre la positionne via `transform`, une échelle la ferait glisser).
   Tout le visuel et toutes les animations sont sur .carte-point__disc.
   ⚠️ Pas de `position` ici : MapLibre pose déjà `position: absolute` via sa
   propre classe `.maplibregl-marker` (vendor/maplibre/maplibre-gl.css) — un
   `position: relative` posé ici (même spécificité, mais cascade après) l'écraserait
   et sortirait le marqueur du positionnement absolu de MapLibre, décalant TOUS
   les points de leurs coordonnées. `.maplibregl-marker` suffit aussi de contexte
   de positionnement pour le ::after du halo ci-dessous (tout `position` non
   `static` convient, `absolute` ou `relative`). */
.carte-point {
  display: block;
  width: 65px;
  height: 65px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}

.carte-point:focus-visible {
  outline: 2px solid #021322;
  outline-offset: 4px;
}

/* Glissement ponctuel de la position vraie vers la position écartée, juste
   après la chute d'intro (cf. markers.js, "moveend" → ECART_TRANSITION_MS).
   Classe posée uniquement le temps de ce saut unique puis retirée : le reste
   du temps (survol, pan/zoom manuels, qui repositionnent à chaque frame),
   `transform` doit rester instantané, sans quoi les points traîneraient
   derrière la caméra ou derrière le curseur. */
.carte-point--ecart-transition {
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.carte-point__disc {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 3px solid var(--c-bronze-accent);
  background: var(--c-parchment);
  box-shadow: 0 2px 6px rgba(44, 35, 24, 0.35);
  overflow: hidden;
  /* Pas de transition sur transform : l'agrandissement au survol est interpolé
     en JS (markers.js) pour rester synchronisé avec l'écartement des voisins. */
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.carte-point:hover .carte-point__disc,
.carte-point:focus-visible .carte-point__disc {
  border-color: #d6ab73;
  box-shadow: 0 4px 12px rgba(44, 35, 24, 0.45);
}

/* Intro : chute en cascade (délai --d posé par markers.js). */
.carte-point--intro .carte-point__disc {
  animation: carte-chute 0.85s cubic-bezier(0.34, 1.45, 0.64, 1) var(--d, 0ms) both;
}

@keyframes carte-chute {
  0%   { opacity: 0; translate: 0 -110px; scale: 0.35; }
  45%  { opacity: 1; }
  100% { opacity: 1; translate: 0 0; scale: 1; }
}

/* Halo pulsant sur les points pas encore ouverts (déphasés par --r) : un fin
   anneau (::after sur la racine .carte-point, jamais mise à l'échelle par
   MapLibre — cf. plus haut) qui grandit et s'efface. L'épaisseur du trait
   (border) reste constante pendant toute l'animation, seul son diamètre
   augmente : contrairement à un box-shadow qui s'étale, l'anneau reste fin. */
.carte-point--neuf::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--c-bronze-accent);
  pointer-events: none;
  animation: carte-halo 2.8s ease-out calc(var(--r, 0) * -0.27s) infinite;
}

.carte-point--neuf:hover::after,
.carte-point--neuf:focus-visible::after {
  animation: none;
  opacity: 0;
}

@keyframes carte-halo {
  0%   { transform: scale(1); opacity: 0.55; }
  70%, 100% { transform: scale(1.35); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .carte-point--intro .carte-point__disc { animation: none; }
  .carte-point--neuf::after { animation: none; opacity: 0; }
}

.carte-point--approx .carte-point__disc {
  border-style: dashed;
}

.carte-point__disc img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- Fiche popup d'un modèle ---- */
.maplibregl-popup.carte-popup-wrap .maplibregl-popup-content {
  background: #f7f2e6;
  border: 1px solid rgba(122, 92, 51, 0.5);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(44, 35, 24, 0.3);
  padding: 0;
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  /* Filet de sécurité : la bascule haut/bas de MapLibre (cf. le commentaire
     sur `offset`/`padding` dans markers.js) reste une estimation, jamais une
     garantie absolue sur une fenêtre très basse. Un plafond de hauteur avec
     défilement interne empêche le cadre de dépasser #carte (overflow: hidden)
     même dans ce cas résiduel — au pire on défile dans le cadre, on ne perd
     jamais son bas (bouton compris) hors champ. */
  max-height: min(70dvh, 360px);
  overflow-y: auto;
  overflow-x: hidden;
}

/* ---- Effet « déploiement » du cadre à l'ouverture, du bas vers le haut ----
   Anime uniquement .maplibregl-popup-content (pas le conteneur
   .maplibregl-popup, qui porte déjà un transform de positionnement posé par
   MapLibre à chaque frame — l'animer créerait un conflit / un décalage).
   Charnière toujours en bas (côté du point cliqué), quel que soit l'anchor
   MapLibre — c'est le sens de dépliage demandé, pas la position de la pointe.
   MapLibre recrée ce DOM à chaque ouverture de popup (marker.setPopup →
   toggle open/close), donc l'animation se relance à chaque clic sans JS
   supplémentaire. */
.maplibregl-popup.carte-popup-wrap .maplibregl-popup-content {
  animation: carte-deploiement 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
  transform-origin: center bottom;
}

@keyframes carte-deploiement {
  0% {
    opacity: 0;
    transform: scaleY(0.06);
  }
  55% {
    opacity: 1;
  }
  78% {
    transform: scaleY(1.04);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .maplibregl-popup.carte-popup-wrap .maplibregl-popup-content {
    animation: none;
  }
}

.carte-popup__vignette {
  display: block;
  width: 100%;
  /* 140px à l'origine : réduit pour laisser plus de marge à la bascule
     haut/bas automatique de MapLibre (cf. commentaire sur `offset` dans
     markers.js) — un cadre plus court a plus de chances de tenir tout entier
     dans la moitié haute OU basse de la carte, quelle que soit la hauteur de
     fenêtre. */
  height: 112px;
  object-fit: cover;
  border-bottom: 1px solid rgba(122, 92, 51, 0.35);
}

.carte-popup__corps {
  padding: 12px 16px 16px;
}

.maplibregl-popup.carte-popup-wrap .maplibregl-popup-tip {
  border-top-color: #f7f2e6;
  border-bottom-color: #f7f2e6;
}

.maplibregl-popup.carte-popup-wrap .maplibregl-popup-close-button {
  color: var(--c-ink);
  font-size: 1.1rem;
  line-height: 1;
  padding: 3px 7px;
  top: 6px;
  right: 6px;
  background: rgba(247, 242, 230, 0.88);
  border-radius: 50%;
}

.maplibregl-popup.carte-popup-wrap .maplibregl-popup-close-button:hover {
  background: #f7f2e6;
}

.carte-popup__titre {
  margin: 0 0 2px;
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--c-ink);
}

.carte-popup__lieu {
  margin: 0 0 12px;
  font-style: italic;
  font-size: 0.85rem;
  color: var(--c-bronze);
}

.carte-popup__actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.carte-popup__btn {
  display: block;
  text-align: center;
  text-decoration: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 7px 10px;
  border-radius: 4px;
  border: 1.5px solid var(--c-bronze);
  color: var(--c-bronze);
  background: transparent;
  transition: background 0.15s ease, color 0.15s ease;
}

.carte-popup__btn:hover {
  background: rgba(122, 92, 51, 0.1);
}

.carte-popup__btn--principal {
  background: var(--c-bronze);
  color: var(--c-parchment);
}

.carte-popup__btn--principal:hover {
  background: #664e2b;
}