/* inca.map.css - Styles de la carte Inca (aucune règle globale : tout est scopé sous .inca-popup) */

/* ═══════════════════════════════════════════════
   DESIGN « VERRE » (glassmorphism)
   Une seule source de vérité : ces variables servent au cadre (en-tête, pied), au curseur de zoom,
   à la barre d'outils et aux messages. Pour changer l'apparence depuis l'hôte, redéfinir une
   variable avec une règle plus spécifique, chargée après ce fichier :
       .inca-popup[type="map-window"] { --inca-glass-blur: 14px; }
   ═══════════════════════════════════════════════ */
.inca-popup[type="map-window"] {
  --inca-gap: 8px;                                    /* marge entre le bord de la carte et le curseur, la barre d'outils… */
  --inca-glass-bg: rgba(38, 128, 139, 0.15);          /* panneaux sans texte (curseur, outils) */
  --inca-glass-bg-text: rgba(24, 66, 76, 0.5);        /* panneaux avec texte (en-tête, pied) : plus denses pour la lisibilité */
  --inca-glass-blur: 8px;
  --inca-glass-border: rgba(255, 255, 255, 0.28);
  --inca-glass-radius: 10px;
  --inca-glass-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  --inca-glass-text: #fff;
  --inca-header-h: 48px;                              /* assez haut pour le champ de recherche (option `search`) */
  --inca-footer-h: 32px;
  --inca-slider-w: 36px;                              /* curseur de zoom : largeur (hors liseré)… */
  --inca-slider-h: 160px;                             /* … et hauteur du panneau (la piste fait 30 px de moins) */
  --inca-top: calc(var(--inca-header-h) + var(--inca-gap));          /* premier pixel libre sous l'en-tête */
  --inca-bottom: calc(var(--inca-footer-h) + var(--inca-gap));       /* dernier pixel libre au-dessus du pied */
}

/* Sans en-tête / sans pied (frame.header / frame.footer à false) : les panneaux remontent / descendent */
.inca-popup[type="map-window"].inca-no-header { --inca-top: var(--inca-gap); }
.inca-popup[type="map-window"].inca-no-footer { --inca-bottom: var(--inca-gap); }

/* Liens */
.inca-popup a:link,
.inca-popup a:visited,
.inca-popup a:hover,
.inca-popup a:active {
  text-decoration: none;
  color: inherit;
}

/* ═══════════════════════════════════════════════
   EN-TÊTE ET PIED : bandeaux de verre pleine largeur, collés aux bords, sans arrondi
   La zone de contenu occupe toute la fenêtre ; l'en-tête et le pied la recouvrent, et floutent
   la carte qui passe dessous. Seul le liseré côté carte est tracé.
   ═══════════════════════════════════════════════ */
.inca-popup[type="map-window"] .inca-popup-header,
.inca-popup[type="map-window"] .inca-popup-footer {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 30;
  box-sizing: border-box;
  padding: 0;
  background: var(--inca-glass-bg-text);
  -webkit-backdrop-filter: blur(var(--inca-glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--inca-glass-blur)) saturate(140%);
  border: 0;
  border-radius: 0;
  box-shadow: var(--inca-glass-shadow);
  color: var(--inca-glass-text);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.inca-popup[type="map-window"] .inca-popup-header {
  top: 0;
  height: var(--inca-header-h);
  border-bottom: 1px solid var(--inca-glass-border);
}

.inca-popup[type="map-window"] .inca-popup-footer {
  bottom: 0;
  height: var(--inca-footer-h);
  border-top: 1px solid var(--inca-glass-border);
}

/* La carte occupe toute la fenêtre ; le flou et l'ombre du contenu n'ont plus d'objet (et coûtent du GPU) */
.inca-popup[type="map-window"] .inca-popup-content {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

/* Boutons d'en-tête (agrandir, fermer, 32 px) : centrés dans la hauteur de la barre */
.inca-popup[type="map-window"] .inca-popup-close-button,
.inca-popup[type="map-window"] .fullscreen {
  top: calc((var(--inca-header-h) - 32px) / 2);
  border-radius: 6px;
}

.inca-popup[type="map-window"] .inca-popup-close-button { right: 4px; }
.inca-popup[type="map-window"] .fullscreen { right: 38px; }

.inca-popup[type="map-window"] .inca-popup-close-button::before,
.inca-popup[type="map-window"] .fullscreen::before {
  color: var(--inca-glass-text);
}

.inca-popup[type="map-window"] .inca-popup-close-button:hover,
.inca-popup[type="map-window"] .fullscreen:hover {
  background: rgba(255, 255, 255, 0.18);
}

/* En-tête : titre, champ de recherche, puis (à droite) altitude, projection et coordonnées, en une seule ligne */
.inca-popup[type="map-window"] .inca-popup-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* Titre : le style en ligne d'IncaPopup le place en absolu ; dans l'en-tête il fait partie de la ligne */
.inca-popup[type="map-window"] .inca-popup-header .inca-title {
  position: static !important;
  flex: none;
  font-size: 0.8em;
  letter-spacing: 0.06em;
  padding-left: 12px;
  white-space: nowrap;
}

/* Altitude, système de projection et coordonnées : à droite, avant les boutons de la fenêtre (2 × 32 px + marges) */
.inca-popup .coord {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  margin-left: auto;
  margin-right: 70px;
  height: 100%;
  font-size: 0.6em;
  letter-spacing: normal;   /* l'interlettrage de l'en-tête fausserait les largeurs en `ch` ci-dessous */
  color: var(--inca-glass-text, #fff);
}

/* Le système de projection est fixe : les coordonnées, qui le suivent, ont une largeur constante */
.inca-popup .coord { position: relative; }
.inca-popup .coord .coordtext  { flex: none; white-space: nowrap; min-width: 17ch; }

/* Le nom de la projection est cliquable : il ouvre la liste des systèmes de coordonnées */
.inca-popup .coord .coord-pickable { cursor: pointer; border-radius: 4px; outline: none; }
.inca-popup .coord .coord-pickable::after { content: " \25BE"; opacity: 0.7; }
.inca-popup .coord .coord-pickable:hover,
.inca-popup .coord .coord-pickable:focus-visible { background: rgba(255, 255, 255, 0.18); }

.inca-popup .coord .coord-crs-list {
  position: absolute;
  top: 100%;
  z-index: 40;
  list-style: none;
  margin: 2px 0 0;
  padding: 4px;
  min-width: max-content;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--inca-glass-bg-text, rgba(24, 66, 76, 0.5));
  border: 1px solid var(--inca-glass-border, rgba(255, 255, 255, 0.28));
  border-radius: var(--inca-glass-radius, 10px);
  -webkit-backdrop-filter: blur(var(--inca-glass-blur, 8px)) saturate(140%);
  backdrop-filter: blur(var(--inca-glass-blur, 8px)) saturate(140%);
  box-shadow: var(--inca-glass-shadow, 0 4px 12px rgba(0, 0, 0, 0.2));
  font-size: 1.15em;
}
.inca-popup .coord .coord-crs-list[hidden] { display: none; }
.inca-popup .coord .coord-crs-group {
  margin: 4px 0 2px;
  padding: 6px 10px 2px;
  border-top: 1px solid var(--inca-glass-border, rgba(255, 255, 255, 0.28));
  font-size: 0.85em;
  opacity: 0.75;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.inca-popup .coord .coord-crs-list button {
  display: block;
  width: 100%;
  padding: 6px 10px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--inca-glass-text, #fff);
  font: inherit;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.inca-popup .coord .coord-crs-list button:hover,
.inca-popup .coord .coord-crs-list button:focus-visible { background: rgba(255, 255, 255, 0.18); outline: none; }
.inca-popup .coord .coord-crs-list button[aria-selected="true"] { font-weight: 600; }
.inca-popup .coord .coord-crs-list button[aria-selected="true"]::before { content: "\2713\00a0"; }
.inca-popup .coord .coordvalue { flex: none; min-width: 25ch; white-space: nowrap; font-variant-numeric: tabular-nums; }
.inca-popup .coord [hidden]    { display: none; }
.inca-popup .coord[data-crs="EPSG:4326"] .coordvalue { min-width: 36ch; }   /* « lat: -47.332539° | lon: -123.166500° » */

/* Pied : crédit à gauche, échelle à droite */
.inca-popup .map-footer {
  position: static;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding: 0 14px;
  box-sizing: border-box;
  font-size: 0.8em;
}

/* Fenêtre redimensionnable : la poignée occupe le coin droit du pied (25 px depuis le bord) ; l'échelle
   s'arrête 20 px avant elle (filet compris) */
.inca-popup .inca-popup-footer:has(.inca-popup-resize) .map-footer {
  padding-right: 47px;
}

.inca-popup .map-credit a {
  color: inherit;
  font-style: normal;
  opacity: 0.85;
}

/* Échelle graphique : 2 segments (noir, blanc) de 5 px d'épaisseur, libellés au-dessus des jonctions */
.inca-popup .scalebar {
  position: relative;
  flex: none;
  padding-top: 13px;                 /* place des libellés */
  font-size: 10px;
  line-height: 12px;
  font-weight: 400;
}

.inca-popup .scalebar-bar {
  display: flex;
  height: 5px;
  /* filets noir puis blanc autour de la barre (hors mise en page) : lisible sur tout fond */
  box-shadow: 0 0 0 1px #000, 0 0 0 2px rgba(255, 255, 255, 0.85);
}

.inca-popup .scalebar-bar i {
  display: block;
  flex: 1;
}

.inca-popup .scalebar-bar i:first-child { background: #000; }
.inca-popup .scalebar-bar i:last-child  { background: #fff; }

.inca-popup .scalebar-label {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}

/* Dernier libellé aligné sur la fin de la barre : rien ne dépasse à droite, la marge de 20 px est exacte */
.inca-popup .scalebar-label:nth-of-type(3) {
  transform: translateX(-100%);
}

/* Poignée de redimensionnement : deux traits en diagonale, dessinés en CSS (blancs, lisibles sur le verre) */
.inca-popup[type="map-window"] .inca-popup-resize {
  right: 4px;
  bottom: 4px;
  width: 16px;
  height: 16px;
  background-image: linear-gradient(135deg,
    transparent 0 52%, rgba(255, 255, 255, 0.8) 52% 60%,
    transparent 60% 72%, rgba(255, 255, 255, 0.8) 72% 80%, transparent 80%);
  opacity: 1;
}

/* ═══════════════════════════════════════════════
   CARTE
   ═══════════════════════════════════════════════ */
.uiLayer,
.carto {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  flex: 1;
  cursor: pointer;
}

.tiles-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* les tuiles ne doivent pas interférer avec les événements */
}

.tiles-layer.current,
.tiles-layer.old {
  will-change: transform, opacity;
}

.carto div[id^="ctr-"] img {
  display: block;
  border: 0;
  outline: 0;
}

/* Recherche d'adresse (option `search`) : champ dans l'en-tête, à droite du titre (marge de 40 px), liste de
   résultats en dessous. Sans en-tête (`.floating`) : champ flottant centré sous le haut de la carte. */
.inca-search {
  position: relative;
  flex: 0 1 300px;
  min-width: 120px;
  margin-left: 40px;
  font-size: 0.8em;
}

.inca-search.floating {
  position: absolute;
  left: 50%;
  top: var(--inca-top, 8px);
  transform: translateX(-50%);
  z-index: 1002;
  flex: none;
  margin: 0;
  width: min(360px, calc(100% - 150px));
  font-size: 1em;
}

.inca-search input {
  box-sizing: border-box;
  width: 100%;
  height: 32px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid var(--inca-glass-border, rgba(255, 255, 255, 0.28));
  border-radius: 8px;
  color: var(--inca-glass-text, #fff);
  font: inherit;
  font-size: 0.55em;   /* moitié de la taille précédente (1.1em) */
  text-shadow: none;
  outline: none;
}

.inca-search.floating input {
  height: 34px;
  background: var(--inca-glass-bg-text, rgba(24, 66, 76, 0.5));
  border-radius: var(--inca-glass-radius, 10px);
  -webkit-backdrop-filter: blur(var(--inca-glass-blur, 8px));
  backdrop-filter: blur(var(--inca-glass-blur, 8px));
  box-shadow: var(--inca-glass-shadow, 0 4px 12px rgba(0, 0, 0, 0.2));
}

.inca-search input::placeholder { color: rgba(255, 255, 255, 0.7); }
.inca-search input:focus { border-color: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.2); }

.inca-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 40;
  list-style: none;
  margin: 8px 0 0;
  padding: 4px;
  max-height: 240px;
  overflow-y: auto;
  background: var(--inca-glass-bg-text, rgba(24, 66, 76, 0.5));
  border: 1px solid var(--inca-glass-border, rgba(255, 255, 255, 0.28));
  border-radius: var(--inca-glass-radius, 10px);
  -webkit-backdrop-filter: blur(var(--inca-glass-blur, 8px));
  backdrop-filter: blur(var(--inca-glass-blur, 8px));
  box-shadow: var(--inca-glass-shadow, 0 4px 12px rgba(0, 0, 0, 0.2));
}

.inca-search-results[hidden] { display: none; }

.inca-search-results button {
  display: block;
  width: 100%;
  padding: 6px 8px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--inca-glass-text, #fff);
  font: inherit;
  font-size: 0.85em;
  text-align: left;
  cursor: pointer;
}

.inca-search-results button:hover,
.inca-search-results button:focus-visible { background: rgba(255, 255, 255, 0.18); outline: none; }

/* Anneau qui signale le lieu trouvé (au centre de la vue) */
.inca-search-pulse {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 0 8px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  z-index: 1003;
  animation: inca-pulse 1.3s ease-out 2;
}

@keyframes inca-pulse {
  from { transform: scale(0.5); opacity: 1; }
  to   { transform: scale(2.2); opacity: 0; }
}

/* Altitude au survol (option `elevation`) : « Altitude NGF : » fixe, à gauche du système de projection */
.inca-popup[type="map-window"] .coord-alt {
  flex: none;
  white-space: nowrap;
  margin-right: 6px;
  padding-right: 14px;
  border-right: 1px solid var(--inca-glass-border);
}
.inca-popup[type="map-window"] .coord-alt-value { display: inline-block; min-width: 8ch; font-variant-numeric: tabular-nums; }

/* Copyrights des couches : au-dessus du pied de verre, à droite */
.inca-copyright {
  position: absolute;
  right: var(--inca-gap, 4px);
  bottom: var(--inca-bottom, 4px);
  z-index: 1000;
  max-width: 45%;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: #2f3b52;
  font-size: 0.7em;
  font-style: italic;
  text-align: right;
  pointer-events: none;
}

.inca-copyright > span + span::before {
  content: " - ";
}

/* ═══════════════════════════════════════════════
   CURSEUR DE ZOOM
   ═══════════════════════════════════════════════ */
.inca-zoom-slider-wrapper {
  position: absolute;
  left: var(--inca-gap, 8px);
  top: var(--inca-top, 30px);
  z-index: 1001;
  width: var(--inca-slider-w, 36px);
  height: var(--inca-slider-h, 160px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--inca-glass-bg, rgba(38, 128, 139, 0.15));
  border-radius: var(--inca-glass-radius, 10px);
  border: 1px solid var(--inca-glass-border, rgba(255, 255, 255, 0.2));
  -webkit-backdrop-filter: blur(var(--inca-glass-blur, 6px));
  backdrop-filter: blur(var(--inca-glass-blur, 6px));
  box-shadow: var(--inca-glass-shadow, 0 4px 12px rgba(0, 0, 0, 0.2));
}

.inca-zoom-slider {
  appearance: none;
  cursor: pointer;
  background: transparent;
  padding: 0;
  margin: 0;
  border: none;
  transform: rotate(-90deg);
  transform-origin: center center;
  flex: none;   /* sans cela, le champ rétrécit à sa largeur intrinsèque (129 px) quel que soit width */
  width: calc(var(--inca-slider-h, 160px) - 30px);   /* piste = hauteur du panneau - 2 × 15 px de marge */
  height: 20px;
}

.inca-zoom-slider::-webkit-slider-runnable-track {
  height: 6px;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 3px;
}

.inca-zoom-slider::-moz-range-track {
  height: 6px;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 3px;
}

.inca-zoom-slider::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #333;
  background: radial-gradient(circle at 30% 30%, #ffffff, #bbb);
  box-shadow:
    inset -2px -2px 4px rgba(255, 255, 255, 0.5),
    inset 2px 2px 4px rgba(0, 0, 0, 0.2),
    0 2px 5px rgba(0, 0, 0, 0.5);
  margin-top: -7px;
}

.inca-zoom-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #333;
  background: radial-gradient(circle at 30% 30%, #ffffff, #bbb);
  box-shadow:
    inset -2px -2px 4px rgba(255, 255, 255, 0.5),
    inset 2px 2px 4px rgba(0, 0, 0, 0.2),
    0 2px 5px rgba(0, 0, 0, 0.5);
}

/* ═══════════════════════════════════════════════
   BARRE D'OUTILS (inca.tools.js)
   inca.tools.css lit des variables posées par l'hôte (--tool-bg, --tool-border…). Sans hôte elles
   n'existent pas : on donne ici l'aspect verre par défaut, qui s'efface devant les variables de l'hôte.
   ═══════════════════════════════════════════════ */
.uiLayer .IncaToolbar {
  padding: 2px;   /* 32 + 2×2 + liseré 2 = 38 px : même largeur que le curseur de zoom */
  gap: 4px;
  background: var(--tool-bg, var(--inca-glass-bg, rgba(38, 128, 139, 0.15)));
  border: 1px solid var(--tool-border, var(--inca-glass-border, rgba(255, 255, 255, 0.2)));
  border-radius: var(--inca-glass-radius, 10px);
  box-shadow: var(--inca-glass-shadow, 0 4px 12px rgba(0, 0, 0, 0.2));
  -webkit-backdrop-filter: blur(var(--inca-glass-blur, 6px));
  backdrop-filter: blur(var(--inca-glass-blur, 6px));
}

.uiLayer .IncaToolbar .inca-tool {
  width: 32px;
  height: 32px;
  background-color: transparent;
  border: 1px solid transparent;
  color: var(--panel-text, var(--inca-glass-text, #fff));
}

.uiLayer .IncaToolbar .inca-tool svg {
  width: 22px;
  height: 22px;
}

.uiLayer .IncaToolbar .inca-tool:hover {
  background: var(--comp-soft, rgba(255, 255, 255, 0.25));
}

.uiLayer .IncaToolbar .inca-tool.active {
  background: var(--tool-active-bg, rgba(255, 255, 255, 0.35));
  border-color: var(--tool-active-text, #fff);
}

/* ═══════════════════════════════════════════════
   ZOOM CADRÉ (outil de la barre d'outils)
   ═══════════════════════════════════════════════ */
.uiLayer.inca-zoombox-active {
  cursor: crosshair;
}

/* Barre Espace tenue : l'outil de déplacement est actif, le zoom cadré est en pause */
.uiLayer.inca-zoombox-active.inca-zoombox-pan {
  cursor: grab;
}

.uiLayer .IncaToolbar .inca-tool.inca-tool-paused {
  opacity: 0.55;
}

.inca-zoombox {
  position: absolute;
  z-index: 500;
  box-sizing: border-box;
  pointer-events: none;
  background: rgba(38, 128, 139, 0.2);
  border: 1.5px dashed rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.25);
}