/* ==========================================================================
   carte-dvf.css — la carte des ventes

   La carte doit ressembler au produit, pas à un fond de plan générique. Trois
   règles suffisent à l'y tenir :

   - les couleurs, les rayons et les traits viennent des variables de
     styles.css, sans nouvelle palette ;
   - rien ne bouge pour décorer. Les seules transitions servent à indiquer un
     état, et `prefers-reduced-motion` les coupe ;
   - le panneau de vente est une colonne de lecture sur grand écran et une
     feuille basse sur mobile, jamais une fenêtre flottante posée sur la carte.

   Les styles de MapLibre sont chargés avant celle-ci et repris ci-dessous là où
   leur apparence par défaut jurerait : boutons de zoom, attribution, échelle.
   ========================================================================== */

/* ----------------------------------------------------------- Enveloppe */

/* La colonne de lecture fait 860 px : c'est bien pour un paragraphe, c'est
   étroit pour une carte, où chaque pixel gagné est du territoire visible. Le
   bloc déborde donc symétriquement jusqu'à la largeur du site, sans jamais
   dépasser la fenêtre ni recourir à une transformation — MapLibre calcule ses
   coordonnées depuis la boîte de l'élément. */
.carte-page {
  --debord: max(0px, (min(var(--wide), 100vw - 2 * var(--page-gutter)) - 100%) / 2);
  margin-left: calc(-1 * var(--debord));
  margin-right: calc(-1 * var(--debord));
}

/* `hidden` doit gagner contre les `display` posés plus bas : sans cette règle,
   le panneau de repli et le rappel d'adresse restent visibles alors que le
   script les a masqués. Le défaut ne se voit pas dans le DOM, seulement à
   l'écran. */
.carte-page [hidden] { display: none; }

.carte-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* -------------------------------------------------------------- Barre */

.carte__barre {
  display: grid;
  gap: 14px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px 16px 0 0;
  border-bottom: 0;
}

.carte__recherche {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.carte__champ {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.carte__champ label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.carte__champ input {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  background: var(--surface-sunk);
  border: 1px solid var(--line-5);
  border-radius: 12px;
  font-size: 16px;
  color: var(--ink);
}

.carte__champ input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  background: var(--surface);
}

.carte__recherche .btn {
  align-self: flex-end;
  height: 52px;
  padding: 0 22px;
  font-size: 15.5px;
}

.carte__adresse-active {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 12px;
  font-size: 14.5px;
  color: var(--ink-2);
}

.carte__hors-zone:empty { display: none; }
.carte__hors-zone { color: var(--warn); }
.carte__hors-zone a { color: var(--accent); text-decoration: underline; }

.carte__adresse-active button {
  margin-left: auto;
  padding: 4px 10px;
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}

.carte__adresse-active button:hover { background: var(--surface-hover); }
.carte__adresse-active button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ------------------------------------------------------------ Filtres */

/* Sur grand écran les cinq groupes passent à la ligne : un filtre qu'il faut
   aller chercher dans un défilement horizontal n'est pas utilisé. Sur mobile,
   la largeur ne le permet pas et la rangée redevient défilante. */
.carte__filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

.carte__groupe { flex: 0 0 auto; }

.carte__groupe-titre {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--muted-2);
}

.carte__chips { display: flex; gap: 6px; }

.carte__chip {
  flex: 0 0 auto;
  height: 36px;
  padding: 0 14px;
  background: var(--surface-sunk);
  border: 1px solid var(--line-5);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-3);
  white-space: nowrap;
  transition: background .14s ease, border-color .14s ease;
}

.carte__chip:hover { background: var(--surface-hover); }
.carte__chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.carte__chip[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* -------------------------------------------------------------- Scène */

.carte__scene {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 400px;
  height: 74vh;
  min-height: 520px;
  border: 1px solid var(--line);
  border-radius: 0 0 16px 16px;
  overflow: hidden;
  background: var(--surface-warm);
}

.carte__toile { position: relative; height: 100%; }
.carte__toile canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Squelette : un fond calme et un statut lisible, pas une animation qui
   simule un travail dont on ne connaît pas la durée. */
.carte__squelette {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-content: center;
  gap: 8px;
  padding: 24px;
  text-align: center;
  background: var(--surface-warm);
  color: var(--muted);
  font-size: 15px;
}

.carte-prete .carte__squelette { display: none; }

.carte__repli {
  position: absolute;
  inset: 12px;
  z-index: 3;
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  font-size: 15px;
  color: var(--ink-2);
}

.carte__repli p { margin: 0; }
.carte__repli a { color: var(--accent); text-decoration: underline; }

/* ------------------------------------------------------------ Panneau */

.carte__panneau {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--surface);
  border-left: 1px solid var(--line);
}

.carte__poignee { display: none; }

.carte__compte {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-3);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-2);
}

.carte__liste {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px 14px 18px;
}

.carte__liste-tete,
.carte__vide {
  margin: 0 4px 10px;
  font-size: 13.5px;
  color: var(--muted);
}

.carte__ventes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

.carte__vente {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 12px 14px;
  text-align: left;
  background: var(--surface-sunk);
  border: 1px solid var(--line-4);
  border-radius: 12px;
  transition: border-color .14s ease, background .14s ease;
}

.carte__vente:hover { background: var(--surface-hover); border-color: var(--line-5); }
.carte__vente:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.carte__vente-prix { font-size: 17px; font-weight: 700; color: var(--ink); }
.carte__vente-bien { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-3); }
.carte__vente-lieu { font-size: 13px; color: var(--muted-2); }

.carte__pastille {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  border-radius: 50%;
}

.carte__pastille--maison { background: var(--accent); box-shadow: 0 0 0 1.5px #fff inset; }
.carte__pastille--appartement { background: #fff; border: 2.5px solid var(--accent); }

/* --------------------------------------------------------------- Fiche */

.carte__fiche {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 400px;
  height: 100%;
  padding: 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface);
  border-left: 1px solid var(--line);
}

.carte__fiche:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.carte__fiche[hidden] { display: none; }

.carte__fiche-tete { position: relative; padding-right: 38px; }

.carte__fiche-surtitre {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
}

.carte__fiche h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 30px;
  line-height: 1.15;
  color: var(--ink);
}

.carte__fiche-ppsm { margin: 6px 0 0; font-size: 14.5px; color: var(--ink-3); }

.carte__fermer {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line-5);
  border-radius: 10px;
  background: var(--surface);
  font-size: 20px;
  line-height: 1;
  color: var(--muted);
}

.carte__fermer:hover { background: var(--surface-hover); color: var(--ink); }
.carte__fermer:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.carte__lignes {
  display: grid;
  gap: 1px;
  margin: 0;
  background: var(--line-4);
  border: 1px solid var(--line-4);
  border-radius: 12px;
  overflow: hidden;
}

.carte__ligne {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px;
  background: var(--surface);
  font-size: 14.5px;
}

.carte__ligne dt { color: var(--muted); }
.carte__ligne dd { margin: 0; font-weight: 600; color: var(--ink-2); text-align: right; }

.carte__actions { display: grid; gap: 10px; }

.carte__lien-commune {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  border: 1px solid var(--line-5);
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--accent);
  background: var(--surface);
}

.carte__lien-commune:hover { background: var(--surface-hover); }
.carte__lien-commune:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.carte__fiche-note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted-2); }

/* ------------------------------------------------------------ Légende */

.carte__legende {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  margin: 14px 0 0;
  font-size: 13.5px;
  color: var(--muted);
}

.carte__legende span { display: flex; align-items: center; gap: 8px; }

/* -------------------------------------------------------- MapLibre */

.maplibregl-ctrl-group {
  border: 1px solid var(--line-5) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(20, 20, 16, .08) !important;
  overflow: hidden;
}

.maplibregl-ctrl-group button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.maplibregl-ctrl-attrib {
  font-size: 11.5px;
  background: rgba(255, 255, 255, .88) !important;
}

.maplibregl-ctrl-attrib a { color: var(--muted); }
.maplibregl-ctrl-scale { border-color: var(--line-6) !important; color: var(--muted) !important; }

/* -------------------------------------------------------------- Mobile */

@media (max-width: 940px) {
  .carte__scene {
    grid-template-columns: 1fr;
    height: 66vh;
    min-height: 460px;
  }

  /* La feuille basse a deux hauteurs. Fermée, elle laisse la carte
     manipulable ; ouverte, elle donne la liste ou la fiche en entier. */
  .carte__panneau {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    height: 42%;
    border-left: 0;
    border-top: 1px solid var(--line);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -10px 30px rgba(20, 20, 16, .12);
    transition: height .18s ease;
  }

  .is-panneau-haut .carte__panneau { height: 82%; }

  .carte__poignee {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 10px 0 8px;
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
  }

  .carte__poignee::before {
    content: "";
    width: 38px;
    height: 4px;
    border-radius: 999px;
    background: var(--line-6);
  }

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

  .carte__fiche {
    top: auto;
    bottom: 0;
    width: 100%;
    height: 82%;
    border-left: 0;
    border-top: 1px solid var(--line);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -10px 30px rgba(20, 20, 16, .16);
  }

  .carte-fiche-ouverte .carte__panneau { display: none; }

  .carte__filtres { flex-wrap: nowrap; overflow-x: auto; }
  .carte__recherche { flex-wrap: wrap; }
  .carte__recherche .btn { width: 100%; }
}

@media (max-width: 560px) {
  .carte-page { padding: 0 16px; }
  .carte__barre { padding: 14px; border-radius: 14px 14px 0 0; }
  .carte__scene { height: 64vh; border-radius: 0 0 14px 14px; }
  .carte__fiche h3 { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .carte__chip,
  .carte__vente,
  .carte__panneau { transition: none; }
}