/* ==========================================================================
   Meaflow — Carte des annonces et des prestataires (Leaflet)
   Composant : .results-map ; mises en page : .map-view (pages de résultats), .map-page (/carte)
   ========================================================================== */

/* ---------- Conteneur ---------- */
.results-map {
  position: relative; z-index: 0; isolation: isolate; /* les volets Leaflet (z-index jusqu'à 1000) restent sous l'en-tête et les modales */
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
  font-family: var(--font); min-height: 280px;
}
.results-map.leaflet-container { font-family: var(--font); font-size: var(--fs-sm); color: var(--ink); background: var(--surface); }
/* Fond Plan IGN atténué : les marqueurs (couleurs des métiers) restent l'information principale. */
.results-map .leaflet-tile-pane { filter: saturate(0.4) brightness(1.05) contrast(0.92); }
.results-map .leaflet-control-zoom { border: 0; box-shadow: var(--shadow-sm); border-radius: var(--radius-sm); overflow: hidden; }
.results-map .leaflet-control-zoom a { width: 36px; height: 36px; line-height: 36px; color: var(--ink); border-color: var(--line); }
.results-map .leaflet-control-zoom a:hover { background: var(--surface); }
.results-map .leaflet-control-attribution { font-family: var(--font); font-size: 11px; color: var(--ink-2); background: rgba(255, 255, 255, 0.85); }
.results-map .leaflet-control-attribution a { color: var(--ink-2); text-decoration: underline; }
.results-map .leaflet-container a, .results-map a { -webkit-tap-highlight-color: transparent; }

/* Message « molette » (mode compact) */
.map-hint {
  position: absolute; z-index: 1000; left: 50%; top: 12px; transform: translate(-50%, -6px);
  padding: 6px 12px; border-radius: var(--radius-pill); background: rgba(15, 30, 54, 0.88); color: #fff;
  font-size: var(--fs-xs); font-weight: 500; pointer-events: none; opacity: 0; transition: opacity 0.2s, transform 0.2s; white-space: nowrap;
}
.map-hint.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Marqueurs ---------- */
.map-marker { background: none; border: 0; }
.map-marker:focus { outline: none; }
.map-marker-body {
  position: absolute; display: flex; align-items: center; justify-content: center; color: #fff;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.35); transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.map-marker-body .icon { display: block; }
/* Annonce : goutte à la couleur du métier (pointe vers la position) */
.map-marker--listing .map-marker-body {
  left: 3px; top: 0; width: 28px; height: 28px; background: var(--c, var(--brand)); border: 2px solid #fff;
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg); transform-origin: 50% 50%;
}
.map-marker--listing .map-marker-glyph { display: flex; transform: rotate(45deg); }
.map-marker--listing:hover .map-marker-body, .map-marker--listing:focus-visible .map-marker-body { transform: rotate(-45deg) scale(1.12); box-shadow: 0 4px 10px rgba(15, 23, 42, 0.4); }
/* Prestataire : pastille carrée arrondie, marine, liseré de la couleur de la 1re compétence */
.map-marker--provider .map-marker-body {
  inset: 1px; background: var(--navy); border: 2px solid #fff; border-radius: 10px;
  box-shadow: 0 0 0 2px var(--edge, var(--brand)), 0 2px 6px rgba(15, 23, 42, 0.35);
}
.map-marker--provider:hover .map-marker-body, .map-marker--provider:focus-visible .map-marker-body { transform: scale(1.12); }
.map-marker:focus-visible .map-marker-body { outline: 3px solid var(--brand); outline-offset: 3px; }

/* ---------- Groupes ---------- */
.map-cluster { background: none; border: 0; }
.map-cluster:focus { outline: none; }
.map-cluster-count {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%;
  color: #fff; font-weight: 700; font-size: var(--fs-sm); border: 3px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.35); transition: transform 0.15s ease;
}
.map-cluster--listing .map-cluster-count { background: var(--brand); }
.map-cluster--provider .map-cluster-count { background: var(--navy); }
.map-cluster--mixed .map-cluster-count { background: linear-gradient(135deg, var(--brand) 0 50%, var(--navy) 50% 100%); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }
.map-cluster:hover .map-cluster-count, .map-cluster:focus-visible .map-cluster-count { transform: scale(1.1); }
.map-cluster:focus-visible .map-cluster-count { outline: 3px solid var(--brand); outline-offset: 3px; }

/* ---------- Légende ---------- */
.map-legend {
  margin: 0 0 10px 10px !important; padding: 8px 10px; background: rgba(255, 255, 255, 0.94); border: 1px solid var(--line);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-xs); font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.4; max-width: 190px;
}
.map-legend-keys { display: flex; gap: 12px; margin: 0 0 4px; padding: 0; list-style: none; font-weight: 600; color: var(--ink); }
.map-legend-keys li { display: inline-flex; align-items: center; gap: 6px; }
.map-legend-dot { width: 12px; height: 12px; flex: none; }
.map-legend-dot--listing { background: var(--brand); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.map-legend-dot--provider { background: var(--navy); border-radius: 4px; }
.map-legend-note { margin: 0; }

/* ---------- Bulles ---------- */
.map-popup-wrap .leaflet-popup-content-wrapper { border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 0; font-family: var(--font); color: var(--ink); }
.map-popup-wrap .leaflet-popup-content { margin: 14px 16px; font-size: var(--fs-sm); line-height: 1.45; }
.map-popup-wrap .leaflet-popup-tip { box-shadow: var(--shadow-sm); }
.map-popup-wrap a.leaflet-popup-close-button { top: 6px; right: 6px; width: 28px; height: 28px; font-size: 20px; line-height: 26px; color: var(--ink-2); }
.map-popup-wrap a.leaflet-popup-close-button:hover { color: var(--ink); }
.map-popup { display: flex; flex-direction: column; gap: 6px; }
.map-popup-wrap .leaflet-popup-content .map-popup p, .map-popup-wrap .leaflet-popup-content .map-popup h3 { margin: 0; } /* écrase « .leaflet-popup-content p { margin: 17px 0 } » */
.map-popup-title { font-size: var(--fs-base); font-weight: 600; line-height: 1.3; padding-right: 18px; overflow-wrap: anywhere; }
.map-popup-cat, .map-popup-chip {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: var(--radius-pill);
  font-size: var(--fs-xs); font-weight: 600; color: var(--ink); background: color-mix(in srgb, var(--cat, var(--faint)) 14%, #fff);
  border: 1px solid color-mix(in srgb, var(--cat, var(--faint)) 45%, #fff);
}
.map-popup-cat .icon { color: var(--cat); }
.map-popup-line { display: flex; align-items: center; gap: 6px; color: var(--ink-2); }
.map-popup-line .icon { flex: none; color: var(--muted); }
.map-popup-budget { font-weight: 700; font-size: var(--fs-base); }
.map-popup-head { display: flex; gap: 10px; align-items: center; padding-right: 18px; }
.map-popup-head .company-logo { flex: none; }
.map-popup-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.map-popup-verified { display: inline-flex; align-items: center; gap: 4px; color: var(--verified); font-size: var(--fs-xs); font-weight: 600; }
.map-popup-skills { display: flex; flex-wrap: wrap; gap: 4px; }
.map-popup-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.map-popup-actions .btn, .map-popup-cta { flex: 1 1 auto; justify-content: center; text-align: center; min-height: 36px; }
.map-popup-cta { margin-top: 4px; }
.map-popup .btn-primary, .map-popup .btn-primary:hover { color: #fff; }
.map-popup-approx { font-size: 11px; color: var(--muted); }

/* ---------- Bascule Liste / Carte ---------- */
.view-toggle { display: inline-flex; padding: 3px; gap: 2px; background: #fff; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); }
.view-toggle-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; min-width: 44px; padding: 0 16px;
  border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink); font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.view-toggle-btn:hover { background: var(--surface-2); }
.view-toggle-btn[aria-pressed="true"] { background: var(--ink); color: #fff; }
.view-toggle-btn[aria-pressed="true"]:hover { background: var(--ink); }

/* ---------- Mise en page : carte + liste dans une page de résultats ---------- */
.map-view { display: flex; flex-direction: column; gap: 16px; }
.map-view-map { height: min(70vh, 640px); }
.map-view-meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; font-size: var(--fs-sm); color: var(--ink-2); }
.map-view-meta strong { color: var(--ink); font-weight: 600; }
.map-note { margin: 0; font-size: var(--fs-xs); color: var(--muted); }
.map-view-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 40px 24px; }

/* ---------- Page /carte ---------- */
.map-page { display: flex; flex-direction: column; background: #fff; }
.map-page-side { display: flex; flex-direction: column; min-height: 0; background: #fff; }
.map-page-filters { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-bottom: 1px solid var(--line); }
.map-page-list { display: flex; flex-direction: column; gap: 4px; padding: 8px; margin: 0; list-style: none; overflow-y: auto; overscroll-behavior: contain; }
.map-page-map { height: 60vh; min-height: 320px; border-radius: 0; border-width: 1px 0; }
.map-page-empty { padding: 24px 16px; text-align: center; color: var(--muted); font-size: var(--fs-sm); }
.map-page-side > .map-note { padding: 8px 16px; border-top: 1px solid var(--line); }

.map-item {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; border: 1px solid transparent; border-radius: var(--radius);
  background: #fff; color: inherit; text-align: left; font: inherit; cursor: pointer; text-decoration: none; transition: background 0.12s, border-color 0.12s;
}
.map-item:hover { background: var(--surface); text-decoration: none; }
.map-item.is-active { background: var(--brand-soft); border-color: var(--brand); }
.map-item-thumb {
  flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-sm);
  background: var(--cat, var(--brand)); color: #fff;
}
.map-item--provider .map-item-thumb { background: var(--navy); box-shadow: inset 0 0 0 2px var(--cat, transparent); }
.map-item-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.map-item-title { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.map-item-meta { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.map-item-price { font-size: var(--fs-xs); font-weight: 600; color: var(--ink); }

/* Bouton « Voir sur la carte » : aligné sur le texte de la fiche (vignette 44 + écart 12 + marge 10) */
.map-item-locate { margin: 0 0 8px 66px; font-size: var(--fs-xs); min-height: 32px; padding: 0 4px; gap: 4px; }
.map-page-filters h1 { font-size: 1.35rem; line-height: 1.25; margin: 0; }
.map-page-filters .select, .map-page-filters .input, .map-page-filters .picker-trigger { min-height: 44px; }
.map-page-filters .picker-trigger { width: 100%; }
.map-page-filters .view-toggle { display: flex; }
.map-page-filters .view-toggle-btn { flex: 1; }
.map-filter-row, .map-filter-foot { display: flex; flex-direction: column; gap: 10px; }
.map-filter-foot { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 16px; gap: 0 16px; }
.map-page-filters .checkbox { min-height: 44px; align-items: center; }
.map-page-filters [data-mp="reset"] { align-self: flex-start; min-height: 44px; gap: 8px; }
/* Compteur : mis en avant au-dessus de la liste */
.map-page-side > [data-mp="count"] { color: var(--ink-2); font-weight: 500; font-size: var(--fs-sm); }
.map-page-empty .spinner { display: block; margin: 0 auto 10px; }
.map-page-empty p { margin: 0 0 8px; }
.map-page-list { max-height: 40vh; }
.map-view-loading { display: inline-flex; align-items: center; gap: 8px; }
.map-view-count { margin: 0; font-weight: 600; color: var(--ink); }
.map-view-meta > .map-view-count, .map-view-meta > .map-note { flex: 1 1 100%; }
.map-view-list { margin-top: 4px; }
.map-view-state, [data-pv="map-state"] { margin: 0; }

/* Mobile : filtres, puis carte, puis liste (l'aside « disparaît » pour réordonner ses enfants) */
@media (max-width: 959px) {
  .map-page-side { display: contents; }
  .map-page-filters { order: 0; gap: 8px; }
  /* Région | mot-clé sur une même ligne : la carte remonte dans l'écran */
  .map-filter-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .map-filter-row > * { min-width: 0; }
  .map-page-map { order: 1; }
  .map-page-side > [data-mp="count"] { order: 2; border-top: 1px solid var(--line); }
  .map-page-list { order: 3; }
  .map-page-side > [data-mp="links"] { order: 4; }
}

@media (min-width: 960px) {
  .map-page { display: grid; grid-template-columns: 380px minmax(0, 1fr); height: calc(100vh - var(--header-h)); overflow: hidden; }
  .map-page-side { border-right: 1px solid var(--line); overflow: hidden; }
  .map-page-list { flex: 1; min-height: 0; max-height: none; }
  .map-page-map { height: 100%; min-height: 0; border-width: 0; }
}
@media (max-width: 720px) {
  .map-view-map { height: 55vh; }
  .map-view-list { grid-template-columns: 1fr; gap: 32px; }
  .map-legend { max-width: 150px; padding: 6px 8px; }
  .map-legend-note { display: none; } /* la mention figure déjà sous la carte */
  .view-toggle-btn { padding: 0 14px; }
  .map-page-filters { padding: 14px var(--gutter, 16px); }
}
@media (prefers-reduced-motion: reduce) {
  .map-marker-body, .map-cluster-count, .map-hint, .view-toggle-btn, .map-item { transition: none; }
  .results-map .leaflet-fade-anim .leaflet-popup, .results-map .leaflet-zoom-anim .leaflet-zoom-animated { transition: none !important; animation: none !important; }
}