/* La fiche d'une parcelle pointée sur le calque du cadastre, dans sa bulle :
   la référence en tampon, l'adresse en titre, puis les chiffres dans les
   couleurs que la carte et la liste leur donnent déjà — bleu le terrain,
   rouge le bâti. */
.map .parcel-popup .maplibregl-popup-content {
  padding: var(--space-sm) var(--space-md) var(--space-md);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.parcel-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  width: min(20rem, calc(100vw - 3rem));
  font-family: var(--font-body);
  line-height: var(--leading);
  color: var(--color-text);
}

.parcel-card__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
}

.parcel-card__titles {
  display: flex;
  flex-direction: column;
  gap: var(--space-4xs);
  flex: 1 1 auto;
  min-width: 0;
}

.parcel-card__kicker {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.parcel-card__ref {
  padding: 0 var(--space-2xs);
  border-radius: var(--radius-sm);
  background-color: var(--color-field);
  font-family: var(--font-mono);
  font-weight: var(--weight-bold);
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text);
}

.parcel-card__address {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: 0;
  font-size: var(--text-lg);
  line-height: 1.3;
  font-weight: var(--weight-bold);
}

.parcel-card__place {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-soft);
}

.parcel-card__close {
  display: grid;
  place-items: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  margin: calc(-1 * var(--space-3xs)) calc(-1 * var(--space-2xs)) 0 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-soft);
  cursor: pointer;
}

.parcel-card__close:hover {
  background-color: var(--color-surface-sunken);
  color: var(--color-text);
}

.parcel-card__close svg,
.parcel-card__icon {
  width: 1rem;
  height: 1rem;
}

.parcel-card__figures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.parcel-card__figure {
  display: flex;
  flex-direction: column;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  background-color: var(--color-field);
}

.parcel-card__figure strong {
  font-size: var(--text-md);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.parcel-card__figure span {
  font-size: var(--text-xs);
  color: var(--color-text-soft);
}

.parcel-card__figure--land {
  background-color: var(--color-land-soft);
  color: var(--color-land);
}

.parcel-card__figure--building {
  background-color: var(--color-building-soft);
  color: var(--color-building);
}

.parcel-card__dpe {
  display: flex;
  flex-direction: column;
  gap: var(--space-4xs);
  font-size: var(--text-sm);
}

.parcel-card__dpe p {
  margin: 0;
}

.parcel-card__heading {
  margin: 0 0 var(--space-3xs);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.parcel-card__none {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-soft);
}

.parcel-card__wait {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  margin: 0;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-sunken);
  font-size: var(--text-sm);
  color: var(--color-text-soft);
}

/* L'analyse court : le même tour que le bouton d'envoi qui travaille. */
.parcel-card__wait--busy::before {
  content: "";
  flex: none;
  width: 0.875rem;
  height: 0.875rem;
  margin-top: 0.2em;
  border: 2px solid var(--color-border-strong);
  border-top-color: var(--color-text);
  border-radius: 50%;
  animation: btn-spin 0.8s linear infinite;
}

.parcel-card__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}

/* Le bouton de sauvegarde prend la place qui reste : c'est le geste de la
   fiche, Maps ne fait que l'accompagner. */
.parcel-card__save {
  flex: 1 1 auto;
}

.parcel-card__keep {
  width: 100%;
}

.parcel-card__actions .badge {
  flex: 1 1 auto;
  text-align: center;
}

.parcel-card__id {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

/* La bulle du survol : la référence et la surface, en encre pleine, qui ne
   prend jamais le pointeur à la carte. */
.map .cadastre-tip {
  pointer-events: none;
}

.map .cadastre-tip .maplibregl-popup-content {
  padding: var(--space-3xs) var(--space-xs);
  border-radius: var(--radius-sm);
  background-color: var(--color-text);
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  animation: none;
}

.map .cadastre-tip .maplibregl-popup-tip {
  display: none;
}

/* Sur un téléphone, la carte n'a pas la hauteur d'une fiche : la fiche monte
   en tiroir depuis le bas de l'écran, par-dessus la liste. MapLibre pose sa
   position en transform inline — le tiroir la reprend. */
@media (max-width: 52rem) {
  .map .maplibregl-popup.parcel-popup {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 40;
    max-width: none !important;
    transform: none !important;
  }

  .map .parcel-popup .maplibregl-popup-tip {
    display: none;
  }

  .map .parcel-popup .maplibregl-popup-content {
    max-height: 70dvh;
    overflow-y: auto;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom));
  }

  .parcel-card {
    width: auto;
  }
}