/* =====================================================================
   Magasin XM : liste, fiche et carte (lot L04)
   ---------------------------------------------------------------------
   - Jetons de xm-store.css (déclarés sur .xm-root et .xm-dialog).
   - Préfixe xm- uniquement ; aucune ancienne classe du magasin
     (.location-item, .ad-popup, .map-control-btn...).
   - Bureau (≥ 900 px) : liste 42 % qui défile avec la page, carte 58 %
     collante (position:sticky posée par xm-store.css), fiche en panneau
     dans le coin de la carte.
   - Téléphone (< 900 px) : aperçu de carte compact AU-DESSUS de la liste,
     carte plein écran dans un <dialog>, fiche en feuille du bas ; cibles
     de 44 px et plus, aucun défilement horizontal de la page.
   - Les sélecteurs Leaflet sont préfixés par .xm-map__canvas.leaflet-container :
     ils battent leaflet.css, injecté APRÈS cette feuille.
   ===================================================================== */

/* ------------------------------------------------------------------ */
/*  Gabarit : liste + carte                                            */
/* ------------------------------------------------------------------ */
.xm-root .xm-browse > [data-xm-slot="list"],
.xm-root .xm-browse > [data-xm-slot="map"] { min-width: 0; }
@media (min-width: 900px) {
  .xm-root .xm-browse { grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); }
}
@media (max-width: 899px) {
  /* La grille du bureau garde align-items:start (carte collante) : en colonne, les
     emplacements doivent s'étirer, sinon ils prennent la largeur de leur contenu. */
  .xm-root .xm-browse { align-items: stretch; }
  .xm-root .xm-browse > [data-xm-slot="list"],
  .xm-root .xm-browse > [data-xm-slot="map"] { width: 100%; }
  /* Liste d'abord : seul l'aperçu compact de la carte la précède. */
  .xm-root .xm-browse > [data-xm-slot="map"] { order: -1; }
}

/* ------------------------------------------------------------------ */
/*  Liste                                                              */
/* ------------------------------------------------------------------ */
.xm-list { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.xm-root .xm-list__title { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }

.xm-list__search { position: relative; display: block; }
.xm-list__searchico {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  display: inline-flex; color: var(--xm-muted); pointer-events: none;
}
.xm-root input.xm-list__input {
  display: block;
  width: 100%;
  height: 52px;
  margin: 0;
  padding: 0 52px 0 46px;
  border: 1.5px solid var(--xm-line-strong);
  border-radius: 12px;
  background: var(--xm-white);
  color: var(--xm-ink);
  font: 500 16px/1.2 var(--xm-font);   /* 16 px : pas de zoom automatique sur iOS */
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
}
.xm-root input.xm-list__input::placeholder { color: #6f6283; opacity: 1; }
.xm-root input.xm-list__input:hover { border-color: var(--xm-muted); }
.xm-root input.xm-list__input:focus { outline: none; border-color: var(--xm-mauve); box-shadow: var(--xm-focus); }
.xm-root input.xm-list__input::-webkit-search-cancel-button,
.xm-root input.xm-list__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.xm-root button.xm-list__clear {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; margin: 0;
  border: 0; border-radius: 10px; background: transparent; color: var(--xm-muted); cursor: pointer;
}
.xm-root button.xm-list__clear:hover { background: var(--xm-mauve-soft); color: var(--xm-ink); }

.xm-list__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.xm-root button.xm-list__chip {
  display: inline-flex; align-items: center; gap: 2px;
  min-height: 44px; padding: 0 16px; margin: 0;
  border: 1.5px solid var(--xm-line-strong); border-radius: 999px;
  background: var(--xm-white); color: var(--xm-ink);
  font: 600 15px/1.2 var(--xm-font); white-space: nowrap; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.xm-root button.xm-list__chip:hover { border-color: var(--xm-mauve); }
.xm-list__chipn { color: var(--xm-muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.xm-root button.xm-list__chip[aria-pressed="true"] { background: var(--xm-ink); border-color: var(--xm-ink); color: #fff; }
.xm-root button.xm-list__chip[aria-pressed="true"] .xm-list__chipn { color: #EDE5F8; }

.xm-root .xm-list__count { font-size: 15px; color: var(--xm-muted); }
.xm-list__count strong { color: var(--xm-ink); font-weight: 700; }

.xm-root .xm-list__items { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

/* ---- Fiche de liste ---- */
.xm-root .xm-lieu {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  margin: 0; padding: 8px 12px 8px 8px;
  background: var(--xm-white);
  border: 1px solid var(--xm-line);
  border-radius: 14px;
  box-shadow: var(--xm-shadow);
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.xm-root .xm-lieu.is-chosen { background: var(--xm-mauve-soft); border-color: #D8C7F1; }
.xm-root .xm-lieu.is-hot,
.xm-root .xm-lieu.is-open { border-color: var(--xm-mauve); box-shadow: 0 0 0 1px var(--xm-mauve), var(--xm-shadow); }
.xm-root button.xm-lieu__info {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 14px;
  min-height: 64px; margin: 0; padding: 4px;
  border: 0; border-radius: 10px; background: transparent;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.xm-lieu__media {
  flex: 0 0 96px; width: 96px; height: 72px;
  border-radius: 10px; overflow: hidden; background: var(--xm-mauve-soft);
}
.xm-lieu__media img,
.xm-fiche__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.xm-ph {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #F4EEFA, #EDE5F8);
  color: var(--xm-mauve); font-size: 11px; font-weight: 700; line-height: 1.15; text-align: center;
}
.xm-ph svg { opacity: .9; }
.xm-ph__txt { padding: 0 4px; }
.xm-lieu__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.xm-lieu__name { font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--xm-ink); overflow-wrap: anywhere; }
.xm-lieu__meta { font-size: 14px; line-height: 1.35; color: var(--xm-muted); }
.xm-lieu__more {
  font-size: 14px; font-weight: 600; color: var(--xm-mauve);
  text-decoration: underline; text-underline-offset: 3px; margin-top: 2px;
}
.xm-root button.xm-lieu__info:hover .xm-lieu__name { color: var(--xm-mauve); }
.xm-root button.xm-lieu__add {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 112px; min-height: 44px; margin: 0; padding: 0 14px;
  border: 1.5px solid var(--xm-mauve); border-radius: 10px;
  background: var(--xm-white); color: var(--xm-mauve);
  font: 700 15px/1.1 var(--xm-font); white-space: nowrap; cursor: pointer;
  transition: background .15s, color .15s;
}
.xm-root button.xm-lieu__add:hover { background: var(--xm-mauve-soft); }
.xm-root button.xm-lieu__add[aria-pressed="true"] { background: var(--xm-mauve); color: #fff; }
.xm-root button.xm-lieu__add[aria-pressed="true"]:hover { background: #5B21B6; border-color: #5B21B6; }
.xm-lieu__glyph { font-weight: 800; font-size: 16px; line-height: 1; }

.xm-list__empty {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 24px 18px; border: 1.5px dashed var(--xm-line-strong); border-radius: 14px;
  background: var(--xm-surface); text-align: center;
}
.xm-root .xm-list__emptymsg { font-weight: 700; color: var(--xm-ink); }
.xm-root .xm-list__emptyhint { font-size: 15px; color: var(--xm-muted); }
.xm-list__emptyacts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* ------------------------------------------------------------------ */
/*  Fiche d'un lieu (panneau au bureau, feuille du bas au téléphone)   */
/* ------------------------------------------------------------------ */
.xm-fiche { display: flex; flex-direction: column; gap: 14px; color: var(--xm-ink); }
.xm-fiche__media {
  display: block; width: 100%; aspect-ratio: 16 / 9; max-height: 210px;
  border-radius: 12px; overflow: hidden; background: var(--xm-mauve-soft);
}
.xm-fiche__media .xm-ph { font-size: 13px; }
/* Sans photo : bandeau de repli bas plutôt qu'un grand cadre vide. */
.xm-fiche__media.is-empty { aspect-ratio: auto; height: 88px; }
.xm-fiche__media.is-empty .xm-ph { flex-direction: row; gap: 8px; }
.xm-fiche__body { display: flex; flex-direction: column; gap: 8px; }
.xm-fiche .xm-fiche__city {
  margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--xm-mauve);
}
.xm-root .xm-fiche__name,
.xm-dialog .xm-fiche__name { margin: 0; font-family: var(--xm-font-title); font-size: 20px; font-weight: 800; line-height: 1.25; color: var(--xm-ink); }
.xm-fiche__name:focus { outline: none; }
.xm-fiche .xm-fiche__facts { margin: 0; font-size: 15px; font-weight: 600; color: var(--xm-ink); }
.xm-fiche .xm-fiche__desc { margin: 0; font-size: 15px; line-height: 1.5; color: var(--xm-muted); }
.xm-fiche .xm-fiche__state { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 15px; font-weight: 700; color: var(--xm-mauve); }
.xm-fiche .xm-fiche__state[hidden] { display: none; }
.xm-fiche__stateglyph { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--xm-mauve); color: #fff; font-size: 13px; }
.xm-root .xm-btn.xm-fiche__toggle,
.xm-dialog .xm-btn.xm-fiche__toggle { width: 100%; margin-top: 4px; }
.xm-btn.xm-fiche__toggle--add { background: var(--xm-mauve); border-color: var(--xm-mauve); color: #fff; }
.xm-btn.xm-fiche__toggle--add:hover:not([disabled]) { background: #5B21B6; border-color: #5B21B6; color: #fff; }
.xm-fiche__glyph { font-weight: 800; font-size: 18px; line-height: 1; }
.xm-fiche .xm-fiche__links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; margin: 2px 0 0; }
.xm-fiche__links a,
.xm-fiche__links button.xm-fiche__onmap {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; margin: 0;
  border: 0; background: none; cursor: pointer;
  font: 700 15px/1.2 var(--xm-font); color: var(--xm-mauve);
  text-decoration: underline; text-underline-offset: 3px;
}
.xm-fiche__links a:hover,
.xm-fiche__links button.xm-fiche__onmap:hover { color: var(--xm-ink); }
.xm-fiche__ext { display: inline-flex; opacity: .8; }
.xm-fiche__dot { flex: 0 0 auto; width: 9px; height: 9px; margin-left: 4px; border-radius: 50%; background: #16A34A; box-shadow: 0 0 0 4px rgba(22, 163, 74, .18); }

/* Panneau du bureau : dans le coin de la carte (l'emplacement collant est son repère). */
.xm-fiche-panel {
  position: absolute; top: 12px; left: 12px; z-index: 5;
  width: min(360px, calc(100% - 24px)); max-height: calc(100% - 24px); overflow-y: auto;
  padding: 16px; background: var(--xm-surface);
  border: 1px solid var(--xm-line); border-radius: 16px; box-shadow: var(--xm-shadow-lg);
  overscroll-behavior: contain;
}
.xm-fiche-panel.xm-fiche-panel--inline { position: relative; top: auto; left: auto; width: 100%; max-height: none; margin-bottom: 16px; }
.xm-fiche-panel .xm-fiche__name { padding-right: 40px; }
.xm-root button.xm-fiche-panel__x {
  position: absolute; top: 8px; right: 8px; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; margin: 0;
  border: 0; border-radius: 10px; background: rgba(255, 252, 248, .92); color: var(--xm-muted); cursor: pointer;
}
.xm-root button.xm-fiche-panel__x:hover { background: var(--xm-mauve-soft); color: var(--xm-ink); }
.xm-fiche-panel .xm-fiche__media { margin-top: 0; }
@media (max-width: 899px) {
  .xm-fiche-panel:not(.xm-fiche-panel--inline) { display: none !important; }   /* la feuille du bas prend le relais */
}

/* Feuille du bas (XmUI.sheet) : fond plus léger, la carte reste devinable derrière. */
dialog.xm-dialog.xm-fiche-sheet::backdrop { background: rgba(20, 8, 40, .38); }
.xm-fiche-sheet .xm-fiche__media { max-height: 190px; }

/* ------------------------------------------------------------------ */
/*  Carte : cadre du bureau                                            */
/* ------------------------------------------------------------------ */
.xm-map { position: relative; }
.xm-map__frame {
  position: relative;
  /* Hauteur de l'écran sous l'en-tête et la barre collante (--xm-bar-top posée par xm-bar.js). */
  height: clamp(440px, calc(100vh - var(--xm-header-h) - var(--xm-bar-top, 88px) - 24px), 780px);
  border: 1px solid var(--xm-line); border-radius: 16px; overflow: hidden;
  background: #EEF0E9; box-shadow: var(--xm-shadow);
  isolation: isolate;
}
.xm-map__canvas { position: absolute; inset: 0; z-index: 0; }
.xm-map__veil,
.xm-map__fail {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 24px; text-align: center; background: var(--xm-surface);
}
.xm-map__veil { z-index: 2; color: var(--xm-muted); font-weight: 600; }
.xm-map__fail { z-index: 3; }
.xm-map__veil[hidden],
.xm-map__fail[hidden] { display: none; }
.xm-map__spin {
  width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid var(--xm-mauve-soft); border-top-color: var(--xm-mauve);
  animation: xm-map-spin .9s linear infinite;
}
@keyframes xm-map-spin { to { transform: rotate(360deg); } }
.xm-map__failico { display: inline-flex; color: var(--xm-mauve); }
.xm-map .xm-map__failtitle,
.xm-mapfull .xm-map__failtitle { margin: 0; font-weight: 800; font-size: 17px; color: var(--xm-ink); }
.xm-map .xm-map__failbody,
.xm-mapfull .xm-map__failbody { margin: 0; max-width: 360px; font-size: 15px; color: var(--xm-muted); }
.xm-map__hint {
  position: absolute; left: 50%; top: 50%; z-index: 4; transform: translate(-50%, -50%);
  margin: 0; padding: 10px 16px; border-radius: 12px; max-width: calc(100% - 48px);
  background: rgba(46, 26, 71, .88); color: #fff; font-size: 15px; font-weight: 600; text-align: center;
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s, visibility 0s linear .2s;
}
.xm-map__hint.is-visible { opacity: 1; visibility: visible; transition: opacity .2s, visibility 0s; }
.xm-root .xm-map__legend {
  position: absolute; left: 12px; bottom: 12px; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  margin: 0; padding: 8px 12px; list-style: none;
  border: 1px solid var(--xm-line); border-radius: 12px; background: rgba(255, 252, 248, .94);
  font-size: 13px; font-weight: 600; color: var(--xm-ink); box-shadow: var(--xm-shadow);
  max-width: calc(100% - 180px);
}
.xm-map__frame:not(.is-ready) .xm-map__legend { display: none; }
/* Fiche ouverte dans le coin de la carte : la légende passerait dessous, on la retire (polissage visuel). */
[data-xm-slot="map"]:has(> .xm-fiche-panel:not([hidden])) .xm-map__legend { display: none; }
.xm-map__legenditem { display: inline-flex; align-items: center; gap: 6px; }
.xm-map__swatch { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--xm-mauve); border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(46, 26, 71, .25); }
.xm-map__legenditem--chosen .xm-map__swatch { background: var(--xm-ink); }
.xm-map__legenditem--cluster .xm-map__swatch { width: 18px; height: 18px; box-shadow: 0 0 0 3px rgba(109, 40, 217, .25); }

/* ---- Leaflet aux couleurs de la charte ---- */
.xm-map__canvas.leaflet-container { background: #EEF0E9; font-family: var(--xm-font); color: var(--xm-ink); }
.xm-map__canvas.leaflet-container a { color: var(--xm-mauve); }
.xm-map__canvas.leaflet-container:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--xm-mauve); }
.xm-map__canvas.leaflet-container .leaflet-tile-pane { filter: saturate(.4) brightness(1.04) contrast(.94); }
.xm-map__canvas.leaflet-container .leaflet-bar {
  border: 1px solid var(--xm-line); border-radius: 10px; box-shadow: var(--xm-shadow); overflow: hidden; background-clip: padding-box;
}
.xm-map__canvas.leaflet-container .leaflet-bar a {
  width: 40px; height: 40px; line-height: 40px; font-size: 20px;
  background: var(--xm-white); color: var(--xm-ink); border-bottom-color: var(--xm-line);
}
.xm-map__canvas.leaflet-container .leaflet-bar a:hover { background: var(--xm-mauve-soft); color: var(--xm-ink); }
.xm-map__canvas.leaflet-container .leaflet-bar a.leaflet-disabled { background: #F6F3EE; color: #9a8fa8; }
.xm-map__canvas.leaflet-container .leaflet-control-attribution {
  font-size: 11px; line-height: 1.5; background: rgba(255, 252, 248, .88); color: var(--xm-muted);
}
.xm-map__canvas.leaflet-container .leaflet-control-attribution a { color: var(--xm-mauve); }
.xm-map__canvas.leaflet-container button.xm-map__fit {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 14px; margin: 10px 10px 0 0;
  border: 1px solid var(--xm-line); border-radius: 10px; background: var(--xm-white);
  color: var(--xm-ink); font: 700 14px/1 var(--xm-font); cursor: pointer; box-shadow: var(--xm-shadow);
}
.xm-map__canvas.leaflet-container button.xm-map__fit svg { color: var(--xm-mauve); }
.xm-map__canvas.leaflet-container button.xm-map__fit:hover { background: var(--xm-mauve-soft); }

/* ---- Épingles (L.divIcon) : état choisi visible ---- */
.xm-map__canvas .xm-map-pinwrap { background: none; border: 0; }
.xm-map-pin {
  position: absolute; left: 50%; top: 50%;
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin: -12px 0 0 -12px;
  border-radius: 50%; background: var(--xm-mauve); border: 2.5px solid #fff;
  box-shadow: 0 2px 6px rgba(46, 26, 71, .35);
  color: #fff; font: 800 13px/1 var(--xm-font);
  transition: transform .15s, background .15s;
}
.xm-map-pin::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.xm-map-pin.is-chosen { width: 28px; height: 28px; margin: -14px 0 0 -14px; background: var(--xm-ink); box-shadow: 0 0 0 3px rgba(109, 40, 217, .35), 0 2px 6px rgba(46, 26, 71, .35); }
.xm-map-pin.is-chosen::after { content: "\2713"; width: auto; height: auto; background: none; font-size: 14px; }
.xm-map__canvas .is-hot .xm-map-pin,
.xm-map__canvas .xm-map-pinwrap:hover .xm-map-pin { transform: scale(1.25); }
.xm-map__canvas .is-hot .xm-map-pin { box-shadow: 0 0 0 5px rgba(109, 40, 217, .3), 0 4px 12px rgba(46, 26, 71, .4); }
.xm-map__canvas .xm-map-pinwrap:focus-visible,
.xm-map__canvas .xm-map-clusterwrap:focus-visible { outline: none; box-shadow: none; }
.xm-map__canvas .xm-map-pinwrap:focus-visible .xm-map-pin,
.xm-map__canvas .xm-map-clusterwrap:focus-visible .xm-map-cluster { box-shadow: 0 0 0 3px #FFFCF8, 0 0 0 6px var(--xm-mauve); }

/* ---- Groupes (markercluster) ---- */
.xm-map__canvas .xm-map-clusterwrap { background: none; border: 0; }
.xm-map-cluster {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--xm-mauve); border: 3px solid #fff;
  box-shadow: 0 0 0 6px rgba(109, 40, 217, .22), 0 3px 10px rgba(46, 26, 71, .35);
  color: #fff; font: 800 15px/1 var(--xm-font);
}
.xm-map__canvas .is-hot .xm-map-cluster { box-shadow: 0 0 0 7px rgba(109, 40, 217, .4), 0 3px 10px rgba(46, 26, 71, .4); }
.xm-map-cluster__ok {
  position: absolute; right: -9px; top: -9px;
  display: flex; align-items: center; justify-content: center;
  min-width: 24px; height: 22px; padding: 0 5px;
  border-radius: 11px; background: var(--xm-ink); border: 2px solid #fff;
  font-size: 11px; font-weight: 800;
}

/* ------------------------------------------------------------------ */
/*  Téléphone : aperçu, pilule « Carte », plein écran                  */
/* ------------------------------------------------------------------ */
.xm-root button.xm-mapprev { display: none; }
.xm-root button.xm-mappill { display: none; }
@media (max-width: 899px) {
  .xm-map__frame { display: none; }
  .xm-root button.xm-mapprev {
    position: relative; display: block;
    width: 100%; height: 220px; margin: 0; padding: 0; /* contrat « liste d'abord » : 220 px au plus */
    border: 1px solid var(--xm-line); border-radius: 16px; overflow: hidden;
    background: radial-gradient(120% 90% at 60% 55%, #FFFFFF 0%, #FBF7F1 55%, #F3ECF9 100%);
    cursor: pointer; text-align: left; color: var(--xm-ink);
    box-shadow: var(--xm-shadow);
  }
  /* Dessin en haut (168 px), bandeau blanc en bas : compte à gauche, « Ouvrir la carte » à droite. */
  .xm-mapprev__art { position: absolute; left: 0; right: 0; top: 0; bottom: 52px; display: block; }
  .xm-root button.xm-mapprev::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 52px;
    background: var(--xm-white); border-top: 1px solid var(--xm-line); pointer-events: none;
  }
  .xm-mapprev__svg,
  .xm-mapprev__img { display: block; width: 100%; height: 100%; object-fit: contain; }
  .xm-mapprev__cta {
    position: absolute; right: 4px; bottom: 4px; z-index: 1;
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; padding: 0 16px;
    border: 0; border-radius: 10px; background: transparent;
    color: var(--xm-mauve); font: 700 16px/1 var(--xm-font);
  }
  .xm-mapprev__cta svg { color: var(--xm-mauve); }
  .xm-mapprev__count {
    position: absolute; left: 14px; bottom: 0; z-index: 1;
    display: flex; align-items: center; height: 52px;
    font-size: 15px; font-weight: 700; color: var(--xm-ink);
  }
  .xm-root button.xm-mapprev:hover .xm-mapprev__cta { background: var(--xm-mauve-soft); }
  .xm-root button.xm-mappill {
    position: fixed; left: 50%; z-index: calc(var(--xm-z-bar) - 1);
    bottom: calc(var(--xm-bar-h) + 16px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 48px; padding: 0 22px; margin: 0;
    border: 0; border-radius: 999px; background: var(--xm-ink); color: #fff;
    font: 700 16px/1 var(--xm-font); box-shadow: var(--xm-shadow-lg); cursor: pointer;
  }
  .xm-root button.xm-mappill[hidden] { display: none; }
}
/* Points de l'aperçu (SVG inséré dans la page) */
.xm-mapprev__svg .xm-apercu-fond { display: none; }
.xm-mapprev__svg .xm-apercu-pt { fill: var(--xm-mauve); stroke: #FFFCF8; stroke-width: 1.5px; vector-effect: non-scaling-stroke; transition: opacity .2s; }
.xm-mapprev__svg .xm-apercu-pt.is-out { opacity: .25; }
.xm-mapprev__svg .xm-apercu-pt.is-chosen { fill: var(--xm-ink); stroke: #C4B5FD; stroke-width: 2.5px; }
.xm-mapprev__svg .xm-apercu-villes { display: none; }
.xm-mapprev__svg.is-labels .xm-apercu-villes,
.xm-mapprev__svg.is-majors .xm-apercu-villes {
  display: inline; paint-order: stroke; stroke: #FFFCF8; stroke-width: 3px; stroke-linejoin: round; vector-effect: non-scaling-stroke;
}
.xm-mapprev__svg.is-majors .xm-apercu-villes text:not(.is-major) { display: none; }

/* Carte plein écran (XmUI.sheet, classe xm-mapfull) : tout l'écran, page verrouillée. */
html.xm-map-locked { overflow: hidden; }
dialog.xm-dialog.xm-mapfull {
  width: 100%; max-width: none; height: 100%; max-height: none;
  margin: 0; inset: 0; padding: 0;
  overscroll-behavior: contain;
}
dialog.xm-dialog.xm-mapfull::backdrop { background: var(--xm-ink, #2E1A47); }
.xm-mapfull .xm-dialog__box {
  display: flex; flex-direction: column;
  width: 100%; max-width: none; height: 100%; height: 100dvh; max-height: none;
  padding: 0; border: 0; border-radius: 0; overflow: hidden; box-shadow: none;
  background: var(--xm-surface);
}
dialog.xm-mapfull .xm-dialog__title {
  flex: 0 0 auto; margin: 0; height: 56px; padding: 0 16px 0 112px;
  font-size: 18px; line-height: 56px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-bottom: 1px solid var(--xm-line); background: var(--xm-surface);
}
dialog.xm-mapfull button.xm-dialog__x { display: none; }
dialog.xm-mapfull .xm-dialog__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0; min-height: 0; }
.xm-mapfull__body { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.xm-dialog button.xm-mapfull__back {
  position: absolute; top: 6px; left: 8px; z-index: 2;
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 44px; min-width: 44px; padding: 0 12px 0 6px; margin: 0;
  border: 0; border-radius: 10px; background: transparent;
  color: var(--xm-mauve); font: 700 17px/1 var(--xm-font); cursor: pointer;
}
.xm-dialog button.xm-mapfull__back:hover { background: var(--xm-mauve-soft); }
.xm-mapfull__stage { position: relative; flex: 1 1 auto; min-height: 0; background: #EEF0E9; isolation: isolate; }
.xm-mapfull__stage .xm-map__canvas.leaflet-container .leaflet-bar a { width: 44px; height: 44px; line-height: 44px; }
.xm-mapfull__stage .xm-map__canvas.leaflet-container button.xm-map__fit { height: 44px; }

@media (max-width: 899px) {
  .xm-lieu__media { flex-basis: 64px; width: 64px; height: 64px; }
  .xm-lieu__media .xm-ph__txt { display: none; }
  .xm-root button.xm-lieu__info { gap: 12px; }
  .xm-root button.xm-lieu__add { min-width: 96px; padding: 0 12px; }
  .xm-root .xm-list__title { font-size: 19px; }
  /* Puces sur une rangée défilante (dans la liste, jamais la page). */
  .xm-list__chips { flex-wrap: nowrap; overflow-x: auto; padding: 2px 2px 6px; scroll-snap-type: x proximity; scrollbar-width: none; }
  .xm-list__chips::-webkit-scrollbar { display: none; }
  .xm-root button.xm-list__chip { scroll-snap-align: start; flex: 0 0 auto; }
}
@media (max-width: 380px) {
  .xm-root button.xm-lieu__add { min-width: 0; }
  .xm-lieu__media { flex-basis: 56px; width: 56px; height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .xm-map__spin { animation: none; }
  .xm-map-pin, .xm-lieu, .xm-root button.xm-lieu__add { transition: none; }
}

/* ---- Aperçu téléphone sur fond de carte réel (XM_CARTES.items.apercu) ---- */
.xm-mapprev__svg--carte { background: #EDEAE4; }
.xm-mapprev__attr {
  position: absolute; right: 4px; bottom: 4px;
  padding: 1px 5px; border-radius: 3px;
  font-size: 10px; line-height: 1.4; color: #5b4d6e; background: rgba(255, 252, 248, .88);
  pointer-events: none;
}

/* ---- Vignettes et fiche : vrai écran xtr.digital en direct, au clic (xtr-player-live.js) ---- */
.xm-lieu__media, .xm-fiche__media { position: relative; }
.xm-lieu__media.is-live, .xm-fiche__media.is-live {
  cursor: pointer;
  background: radial-gradient(120% 120% at 28% 18%, #4C2A85 0%, #2E1A47 58%, #1E1033 100%);
}
.xm-lieu__media.is-live::after, .xm-fiche__media.is-live::after {
  content: attr(data-hint);
  position: absolute; left: 0; right: 0; bottom: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-align: center;
  color: rgba(255, 255, 255, .82); pointer-events: none;
}
.xm-fiche__media.is-live::after { bottom: 10px; font-size: 11px; }
.xm-lieu__media .xtr-player-live__cta, .xm-fiche__media .xtr-player-live__cta { background: transparent; }
/* Vignette de liste : bouton rond, icône seule (le libellé reste le nom accessible). */
.xm-lieu__media .xtr-player-live__cta span {
  font-size: 0; gap: 0; width: 38px; height: 38px; padding: 0; justify-content: center; border-radius: 50%;
  margin-bottom: 10px;
}
.xm-lieu__media .xtr-player-live__cta span::before { margin-left: 3px; }
.xm-lieu__media .xtr-player-live__cta:focus-visible span,
.xm-fiche__media .xtr-player-live__cta:focus-visible span { outline: 2px solid #FFFFFF; outline-offset: 2px; }
.xm-lieu__media .xtr-player-live__badge { top: 4px; left: 4px; padding: 3px 6px; gap: 4px; font-size: 9px; }
.xm-lieu__media .xtr-player-live__badge::before { width: 6px; height: 6px; }
.xm-fiche__media .xtr-player-live__cta span { margin-bottom: 14px; }
@media (max-width: 899px) {
  .xm-lieu__media .xtr-player-live__cta span { width: 34px; height: 34px; margin-bottom: 8px; }
  .xm-lieu__media.is-live::after { font-size: 9px; bottom: 3px; }
}
/* Pages anglaises : le badge du lecteur (« EN DIRECT », texte figé dans le script) devient « LIVE ». */
html[lang="en"] .xtr-player-live__badge { font-size: 0; }
html[lang="en"] .xtr-player-live__badge::after { content: "LIVE"; font-size: 12px; }
html[lang="en"] .xm-lieu__media .xtr-player-live__badge::after { font-size: 9px; }