/* Injouables — carte vive, fiche sans marge et mobile agrandi (20 octobre 2026). */

/* Une seule barre de défilement : celle de la page. */
html.m-embedded, html.m-embedded body { overflow:hidden!important; height:auto!important; }
html.m-embedded body { overscroll-behavior:none; }

/* Quartiers : couleurs franches au repos ; effet néon translucide au survol et à la sélection. */
.m-map #m-svg .m-zone polygon {
  fill:var(--zone)!important;
  fill-opacity:.48;
  stroke:var(--zone);
  stroke-opacity:1;
  stroke-width:2.2px;
  filter:saturate(1.15);
  transition:fill-opacity .2s ease,stroke-width .2s ease,filter .2s ease;
}
.m-map #m-svg .m-zone:hover polygon,
.m-map #m-svg .m-zone polygon:focus-visible {
  fill-opacity:.56;
  stroke:#fff;
  stroke-width:2.6px;
  filter:saturate(1.25);
}
.m-map #m-svg .m-zone.selected polygon,
.m-map #m-svg .m-zone.selected polygon:focus {
  fill-opacity:.58;
  stroke:#fff;
  stroke-width:2.8px;
  filter:saturate(1.25);
}
/* Effet néon : halo coloré flouté + filament blanc, sur des couches à part (le remplissage reste translucide). */
.m-map #m-svg .m-zone .m-zone-neon,
.m-map #m-svg .m-zone .m-zone-neon-core {
  fill:none;stroke-linejoin:round;opacity:0;pointer-events:none;transition:opacity .2s ease;
}
.m-map #m-svg .m-zone .m-zone-neon { stroke:var(--zone);stroke-width:22px;filter:blur(6px) saturate(1.8) brightness(1.6);mix-blend-mode:screen; }
.m-map #m-svg .m-zone .m-zone-neon-core { stroke:#fff;stroke-width:3px;filter:drop-shadow(0 0 2px var(--zone)); }
.m-map #m-svg .m-zone:hover .m-zone-neon,
.m-map #m-svg .m-zone:hover .m-zone-neon-core,
.m-map #m-svg .m-zone:focus-within .m-zone-neon,
.m-map #m-svg .m-zone:focus-within .m-zone-neon-core,
.m-map #m-svg .m-zone.selected .m-zone-neon-core { opacity:1; }
/* Pulsation du quartier sélectionné : opacité seule (le flou du halo n'est pas recalculé à chaque image). */
.m-map #m-svg .m-zone.selected .m-zone-neon { opacity:1;animation:m-zone-pulse 1.8s ease-in-out infinite; }
@keyframes m-zone-pulse {
  0%,100% { opacity:.6; }
  50% { opacity:1; }
}
.m-map[data-dragging="true"] #m-svg .m-zone.selected .m-zone-neon { animation-play-state:paused; }
.m-map #m-svg .m-zone text { fill:#fff;stroke:#000;paint-order:stroke;font-weight:600; }
.m-map #m-svg .m-zone:hover text,
.m-map #m-svg .m-zone.selected text { fill:#fff8de; }

/* Aide de navigation à côté des boutons + / −. */
.m-zoom-controls .m-zoom-guide {
  display:flex;flex-direction:column;justify-content:center;
  padding:0 10px 0 8px;margin-left:2px;
  border-left:1px solid rgba(236,213,153,.3);
  line-height:1.25;white-space:nowrap;pointer-events:none;
}
.m-zoom-controls .m-zoom-guide strong { color:#f3d999;font:650 12px/1.25 Inter,system-ui,Arial,sans-serif; }
.m-zoom-controls .m-zoom-guide small { color:#d9d9d9;font:500 10.5px/1.3 Inter,system-ui,Arial,sans-serif; }

/* Fiche quartier : aucun débordement de texte, aucune barre latérale visible. */
.m-map #m-info.m-info {
  scrollbar-width:none!important;
  -ms-overflow-style:none;
  overscroll-behavior:contain;
}
.m-map #m-info.m-info::-webkit-scrollbar { display:none;width:0;height:0; }
.m-map #m-info,
.m-map #m-info * { min-width:0; }
.m-map #m-info .m-description-wrap { width:auto!important;max-width:100%; }
.m-map #m-info .m-description,
.m-map #m-info .m-interest,
.m-map #m-info .m-benefits li span,
.m-map #m-info .m-district-title,
.m-map #m-info .m-project-content strong,
.m-map #m-info .m-project-content small {
  overflow-wrap:break-word;word-break:normal;hyphens:auto;white-space:normal;
}
.m-map #m-info .m-read-more { min-width:0!important; }
.m-map #m-info .m-read-more[hidden] { display:none!important; }
.m-map #m-info .m-district-crumb { color:#bfbfbf; }
.m-map #m-info .m-crumb-current { border-left-color:#5a5a5a;color:#e8c88e; }
.m-map .m-picker-option-content small { color:#bdbdbd; }

/* Biens à découvrir : photo, titre, localisation ; le prix s'affiche dans la fiche. */
.m-map #m-info .m-project { cursor:pointer;border-color:#ffffff24;background:#0b0b0b;transition:border-color .16s,transform .16s; }
.m-map #m-info .m-project:hover,
.m-map #m-info .m-project:focus-visible { border-color:#d8b777;transform:translateY(-1px); }
.m-map #m-info .m-project-example,
.m-map #m-info .m-project-example:hover { cursor:default;transform:none;border-color:#ffffff1c; }
.m-map #m-info .m-project-visual { position:relative;display:block;overflow:hidden;border-radius:6px; }
.m-map #m-info .m-project-visual .m-project-image { display:block;width:100%;height:92px;object-fit:cover;border-radius:6px;background-size:cover;background-position:center; }
.m-map #m-info .m-project-content strong { font-size:11.5px!important;line-height:1.3!important;color:#f6f6f6; }
.m-map #m-info .m-project-content small { font-size:10px!important;line-height:1.35!important;color:#cfcfcf; }
.m-map #m-info .m-project-arrow { color:#e8c88e; }

/* Bandeau « Vendu ». */
.m-map .m-sold-ribbon {
  position:absolute;top:12px;right:-30px;z-index:2;
  width:110px;padding:3px 0;transform:rotate(45deg);
  background:linear-gradient(135deg,#b3001b,#e3002a 55%,#9e0018);
  border-top:1px solid #f3d999;border-bottom:1px solid #f3d999;
  color:#fff;text-align:center;text-transform:uppercase;
  font:700 9px/1.2 Inter,system-ui,Arial,sans-serif;letter-spacing:.22em;
  box-shadow:0 3px 10px rgba(0,0,0,.45);pointer-events:none;
}

/* Téléphone : carte plus grande, titres lisibles, sélecteur sous la carte. */
@media (max-width:650px) {
  .m-app { padding:8px!important; }
  .m-map { display:flex!important;flex-direction:column;overflow:visible!important;border:0!important;background:transparent!important; }
  .m-map #m-svg {
    order:0;width:100%!important;
    height:clamp(360px,118vw,540px)!important;min-height:0!important;
    aspect-ratio:auto!important;border-radius:13px;background:transparent;
  }
  .m-map .m-district-picker {
    order:1;position:relative!important;
    top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;
    width:100%!important;margin:10px 0 0;
  }
  .m-map .m-picker-toggle { min-height:52px; }
  .m-map .m-picker-value { font-size:15px; }
  .m-map .m-picker-popover { bottom:calc(100% + 8px);max-height:min(380px,62svh); }
  .m-picker-option-content strong { font-size:14px; }
  .m-map #m-info.m-info,
  .m-map #m-info.m-info.show {
    order:2;position:relative!important;
    top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;
    width:auto!important;max-height:none!important;margin:12px 0 4px!important;
    overflow:visible!important;
  }
  .m-map #m-info .m-district-title { font-size:21px!important; }
  .m-map #m-info .m-description { font-size:13.5px!important;line-height:1.6!important; }
  .m-map #m-info .m-interest,.m-map #m-info .m-benefits { font-size:13px!important; }
  .m-map #m-info .m-projects-title { font-size:13px!important; }
  .m-map #m-info .m-project { padding:6px; }
  .m-map #m-info .m-project-visual .m-project-image { height:clamp(84px,26vw,120px); }
  .m-map #m-info .m-project-content strong { font-size:13px!important; }
  .m-map #m-info .m-project-content small { font-size:11.5px!important; }
  .m-zoom-controls .m-zoom-guide { padding:0 6px; }
  .m-zoom-controls .m-zoom-guide strong { font-size:11px; }
  .m-zoom-controls .m-zoom-guide small { display:none; }
  .m-map #m-svg .m-zone text { font-weight:800; }
}
@media (prefers-reduced-motion:reduce) {
  .m-map #m-svg .m-zone.selected .m-zone-neon { animation:none; }
}

/* ===== Liquid glass : bords de la carte fondus, verre dépoli, lueur cyan et dorée, reflets. ===== */
.m-map.m-has-glass {
  --glass-radius:18px;
  --glass-feather:30px;
  --glass-blur:38px;
  border-radius:var(--glass-radius)!important;
  border-color:transparent!important;
}
/* 1. Fondu progressif : la carte s'efface doucement sur ses bords au lieu de s'arrêter net. */
.m-map.m-has-glass #m-svg {
  border-radius:var(--glass-radius);
  -webkit-mask-image:
    linear-gradient(to right, rgba(0,0,0,.18) 0, #000 var(--glass-feather), #000 calc(100% - var(--glass-feather)), rgba(0,0,0,.18) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.18) 0, #000 var(--glass-feather), #000 calc(100% - var(--glass-feather)), rgba(0,0,0,.18) 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right, rgba(0,0,0,.18) 0, #000 var(--glass-feather), #000 calc(100% - var(--glass-feather)), rgba(0,0,0,.18) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.18) 0, #000 var(--glass-feather), #000 calc(100% - var(--glass-feather)), rgba(0,0,0,.18) 100%);
  mask-composite:intersect;
}
.m-map .m-glass {
  position:absolute;z-index:2;pointer-events:none;
  border-radius:var(--glass-radius);overflow:hidden;
  /* 5. Vignettage + profondeur intérieure. */
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.14),
    inset 0 0 18px rgba(63,214,255,.28),
    inset 0 0 40px rgba(0,0,0,.3);
}
/* 2-3. Verre dépoli et flou diffus, uniquement près des bords : le centre reste net. */
.m-map .m-glass > span {
  position:absolute;inset:0;border-radius:inherit;
  -webkit-backdrop-filter:blur(7px) saturate(1.35) brightness(1.06);
  backdrop-filter:blur(7px) saturate(1.35) brightness(1.06);
  background:linear-gradient(135deg,rgba(63,214,255,.07),rgba(255,255,255,.02) 45%,rgba(232,200,142,.08));
  -webkit-mask-image:
    linear-gradient(to right, #000 0, transparent var(--glass-blur), transparent calc(100% - var(--glass-blur)), #000 100%),
    linear-gradient(to bottom, #000 0, transparent var(--glass-blur), transparent calc(100% - var(--glass-blur)), #000 100%);
  -webkit-mask-composite:source-over;
  mask-image:
    linear-gradient(to right, #000 0, transparent var(--glass-blur), transparent calc(100% - var(--glass-blur)), #000 100%),
    linear-gradient(to bottom, #000 0, transparent var(--glass-blur), transparent calc(100% - var(--glass-blur)), #000 100%);
  mask-composite:add;
}
/* 4. Lueur périphérique : liseré dégradé cyan → blanc → or. */
.m-map .m-glass::before {
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;
  background:linear-gradient(135deg,#3fd6ff 0%,rgba(140,230,255,.55) 22%,rgba(255,255,255,.12) 48%,rgba(240,205,140,.55) 78%,#e8c88e 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  filter:drop-shadow(0 0 6px rgba(63,214,255,.55));
}
/* 6. Reflets : brillance en haut à gauche et léger éclat en bas à droite. */
.m-map .m-glass::after {
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:
    radial-gradient(120% 60% at 8% -8%, rgba(255,255,255,.26), rgba(255,255,255,.06) 28%, transparent 46%),
    linear-gradient(180deg, rgba(255,255,255,.10), transparent 12%),
    radial-gradient(70% 40% at 100% 105%, rgba(232,200,142,.20), transparent 55%);
  mix-blend-mode:screen;
}
/* Les commandes, le sélecteur et la fiche restent au-dessus du verre. */
.m-map.m-has-glass .m-zoom-controls { z-index:6; }
.m-map.m-has-glass .m-district-picker,
.m-map.m-has-glass #m-info { z-index:7; }
.m-map.m-has-glass .m-zoom-controls {
  -webkit-backdrop-filter:blur(12px) saturate(1.4);backdrop-filter:blur(12px) saturate(1.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 8px 24px rgba(0,0,0,.35);
}
@media (max-width:650px) {
  .m-map.m-has-glass { --glass-radius:20px;--glass-feather:20px;--glass-blur:26px; }
  .m-map.m-has-glass #m-svg { border-radius:var(--glass-radius)!important; }
  /* Sous la carte, le sélecteur est un bouton à part : noir et or, sans aucun effet verre. */
  .m-map .m-district-picker .m-picker-toggle {
    background:#000!important;border:1px solid rgba(237,211,145,.7)!important;border-radius:11px!important;
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  }
  .m-map .m-district-picker .m-picker-popover {
    background:#000!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  }
  /* Téléphone : liste des quartiers uniquement, sans champ de recherche (pas de clavier). */
  .m-map .m-picker-search-label,
  .m-map .m-picker-search-box { display:none!important; }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .m-map .m-glass > span { background:linear-gradient(135deg,rgba(63,214,255,.12),rgba(0,0,0,.18) 45%,rgba(232,200,142,.12)); }
}
/* Seuls les quartiers qui touchent le bord de l'illustration se fondent avec elle (noms nets) :
   un masque par forme coûte cher pendant le glissement, il n'est donc posé que là où il sert. */
.m-map.m-has-edge-mask #m-svg .m-zone.m-touch-edge polygon,
.m-map.m-has-edge-mask #m-svg .m-zone.m-touch-edge .m-zone-neon,
.m-map.m-has-edge-mask #m-svg .m-zone.m-touch-edge .m-zone-neon-core { mask:url(#m-edge-mask); }

/* Glissement fluide : pendant que le doigt bouge, les effets recalculés à chaque image
   (verre dépoli, flou des commandes) sont suspendus ; ils reviennent dès le relâchement. */
.m-map[data-dragging="true"] .m-glass > span {
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  background:linear-gradient(135deg,rgba(63,214,255,.1),rgba(255,255,255,.05) 45%,rgba(232,200,142,.1));
}
.m-map[data-dragging="true"] .m-zoom-controls { -webkit-backdrop-filter:none!important;backdrop-filter:none!important; }
.m-map #m-svg .m-image-extension { pointer-events:none; }

/* Carte flottante : aucun fond noir derrière la carte, la page du site se voit autour et à travers les bords. */
html.m-embedded, html.m-embedded body { background:transparent!important;color-scheme:normal; }
html.m-embedded .m-app { background:transparent!important; }
.m-map.m-has-glass { background:transparent!important;border:0!important; }
.m-map.m-has-glass #m-svg { background:transparent!important; }

/* Téléphone : la fiche quartier découpe son contenu à ses coins arrondis (la photo de couverture
   ne dépasse plus), sans créer de défilement interne. */
@media(max-width:650px){
  .m-map #m-info.m-info,.m-map #m-info.m-info.show { overflow:hidden!important;overflow:clip!important; }
}