/* ============================================================
   La balade au marché en 3D (balade.html, js/balade-3d.js).
   La scène occupe tout l'écran (canvas) ; par-dessus : la barre du
   haut, l'accueil, le téléphone (la boutique du stand), la fiche de
   l'emplacement libre, « Mon perso » et les infos.
   Cartes blanches et boutons terracotta de la charte Hopla.
   ============================================================ */

:root {
  --bm-ink: #3a2a20;
  --bm-terra: #c8502c;
  --bm-glass: rgba(255, 250, 244, 0.92);
  --bm-safe-top: env(safe-area-inset-top, 0px);
  --bm-safe-bottom: env(safe-area-inset-bottom, 0px);
}

html, body.bm3d {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #f2d6b8;
  overscroll-behavior: none;
}
body.bm3d {
  font-family: var(--font);
  color: var(--ink);
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
#bm-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: block;
  touch-action: none;
  outline: none;
}
.bm-noscript { position: fixed; inset: auto 16px 40% 16px; text-align: center; font-size: 16px; }

/* ---------- Barre du haut ---------- */
.bm-top {
  position: fixed;
  top: calc(12px + var(--bm-safe-top));
  left: 16px;
  right: 16px;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}
.bm-top > * { pointer-events: auto; }
.bm-back,
.bm-find,
.bm-perso-btn,
.bm-round {
  height: 44px;
  box-sizing: border-box;
  border-radius: 100px;
  background: var(--bm-glass);
  border: 1px solid rgba(90, 50, 20, 0.12);
  box-shadow: 0 8px 22px -12px rgba(60, 30, 10, 0.45);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.bm-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px 0 8px;
  color: var(--bm-ink);
  text-decoration: none;
  font: 700 14px/1 var(--font);
  flex-shrink: 0;
}
.bm-back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.bm-back .hopla-logo .mark { width: 26px; height: 26px; }
.bm-find {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 420px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px 0 14px;
  font: 700 14px/1 var(--font);
  color: var(--bm-ink);
  cursor: pointer;
  white-space: nowrap;
}
.bm-find:hover { border-color: var(--bm-terra); }
.bm-find svg { width: 19px; height: 19px; flex-shrink: 0; fill: none; stroke: var(--bm-terra); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bm-find-zone { overflow: hidden; text-overflow: ellipsis; font-weight: 600; color: var(--ink-3); }
.bm-find-zone:empty { display: none; }
.bm-find-zone::before { content: '·'; margin-right: 8px; color: #b9aa9b; }
.bm-perso-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px 0 5px;
  max-width: 170px;
  font: 700 14px/1 var(--font);
  color: var(--bm-ink);
  cursor: pointer;
  flex-shrink: 0;
}
.bm-perso-btn:hover { border-color: var(--bm-terra); }
.bm-perso-btn #bm-perso-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-perso-mini {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #f6e3cd;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.bm-perso-mini canvas { width: 34px; height: 34px; display: block; }
.bm-round {
  width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  color: var(--bm-ink);
}
.bm-round svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.bm-round:hover { border-color: var(--bm-terra); }

body:not(.is-playing) .bm-find,
body:not(.is-playing) .bm-perso-btn,
body:not(.is-playing) .bm-bag-btn { visibility: hidden; }

/* ---------- Vitrines au-dessus des stands ----------
   La photo d'une boutique en grand et ce qu'elle vend, au-dessus des stands
   les plus proches (placées par placeVitrines, balade-3d.js). Sous les
   étiquettes du perso et la barre du haut. */
.bm-vitrines {
  position: fixed;
  inset: 0;
  z-index: 110;
  pointer-events: none;
  overflow: hidden;
}
body.is-preview .bm-vitrines { display: none; }
.bm-vit {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  pointer-events: auto;
  transform-origin: 50% 100%;
  will-change: transform, opacity;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.bm-vit[hidden] { display: none; }
.bm-vit-ph {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 16px;
  border: 3px solid #fff;
  background: #f3e7d8;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(60, 30, 10, 0.3);
}
.bm-vit-ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bm-vit-what {
  position: relative;
  margin-top: -10px;
  max-width: 118px;
  padding: 3px 9px;
  border-radius: 100px;
  background: #fff;
  color: #3b2a20;
  font: 800 11.5px/1.25 var(--font);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 2px 7px rgba(60, 30, 10, 0.24);
}
.bm-vit-what:empty { display: none; }
/* petite tige qui descend vers le stand */
.bm-vit::after {
  content: '';
  width: 2px;
  height: 9px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.9);
}
.bm-vit:hover .bm-vit-ph { border-color: #ffe2c8; }
@media (max-width: 699px), (pointer: coarse) {
  .bm-vit-ph { width: 64px; height: 64px; border-radius: 14px; }
  .bm-vit-what { font-size: 11px; max-width: 108px; }
}

/* ---------- Étiquette et bulle du perso ---------- */
.bm-tag,
.bm-bubble {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 150;
  pointer-events: none;
  white-space: nowrap;
  will-change: transform;
}
.bm-tag {
  padding: 3px 9px;
  border-radius: 100px;
  background: var(--bm-terra);
  color: #fff;
  font: 800 11.5px/1.3 var(--font);
  box-shadow: 0 3px 8px rgba(90, 30, 10, 0.3);
}
.bm-tag.is-guest { background: rgba(58, 42, 32, 0.86); }
.bm-tag[hidden], .bm-bubble[hidden] { display: none; }
.bm-bubble {
  padding: 8px 13px;
  border-radius: 14px;
  background: #fff;
  color: var(--bm-ink);
  font: 800 14px/1.25 var(--font);
  box-shadow: 0 8px 20px -8px rgba(60, 30, 10, 0.45);
}
.bm-bubble::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  margin-left: -7px;
  border: 7px solid transparent;
  border-top-color: #fff;
}
.bm-bubble.is-pop { animation: bm-pop 0.22s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes bm-pop { from { opacity: 0; scale: 0.7; } }

/* ---------- Rappel devant un stand, aide ----------
   Bouton d'action en bas à droite (demande de Roinitox, 2026-11-04) :
   au doigt, il répond à la manette de gauche, comme une manette de jeu. */
.bm-prompt {
  position: fixed;
  right: calc(20px + env(safe-area-inset-right, 0px));
  bottom: calc(24px + var(--bm-safe-bottom));
  z-index: 250;
  display: flex;
  align-items: center;
  gap: 11px;
  max-width: min(340px, calc(100vw - 40px));
  padding: 11px 18px 11px 12px;
  border: 0;
  border-radius: 20px;
  background: linear-gradient(135deg, #e0722f 0%, #c94d1d 42%, #a63c11 100%);
  color: #fff;
  font: 500 13px/1.25 var(--font);
  text-align: left;
  box-shadow: 0 14px 28px -12px rgba(120, 40, 10, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  cursor: pointer;
  animation: bm-rise 0.2s ease-out;
  -webkit-tap-highlight-color: transparent;
}
.bm-prompt:active { transform: scale(0.97); }
.bm-prompt-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
}
.bm-prompt-ico svg { width: 21px; height: 21px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bm-prompt-txt { min-width: 0; display: grid; gap: 2px; }
.bm-prompt-act { font: 800 15.5px/1.2 var(--font); white-space: nowrap; }
.bm-prompt-who { display: flex; align-items: center; gap: 6px; min-width: 0; opacity: 0.94; }
.bm-prompt-who strong { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-prompt-craft {
  flex: none;
  padding: 1px 8px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.2);
  font: 700 11px/1.45 var(--font);
}
.bm-prompt[hidden] { display: none; }
.bm-prompt kbd {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.95);
  color: #a63c11;
  font: 800 11px/1.35 var(--font);
  vertical-align: 2px;
}
@keyframes bm-rise { from { transform: translateY(12px); opacity: 0; } }
.bm-hint {
  position: fixed;
  left: 50%;
  bottom: calc(80px + var(--bm-safe-bottom));
  z-index: 240;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100vw - 32px);
  margin: 0;
  padding: 9px 16px;
  border-radius: 100px;
  background: var(--bm-glass);
  color: var(--bm-ink);
  font: 600 13px/1.35 var(--font);
  text-align: center;
  box-shadow: 0 8px 22px -12px rgba(60, 30, 10, 0.45);
  pointer-events: none;
  transition: opacity 0.6s ease;
}
.bm-hint[hidden] { display: none; }
.bm-hint.is-out { opacity: 0; }

/* ---------- Manette au doigt ----------
   Fixe en bas à gauche (téléphone, tablette) : on la voit dès le départ,
   le doigt posé dessus fait marcher ; ailleurs, un doigt fait tourner
   la caméra. Elle clignote tant que les consignes l'attendent. */
.bm-joy {
  position: fixed;
  z-index: 180;
  left: calc(24px + env(safe-area-inset-left, 0px));
  bottom: calc(28px + var(--bm-safe-bottom));
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: rgba(43, 33, 28, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.78);
  box-shadow: 0 6px 20px -8px rgba(60, 30, 10, 0.45);
  pointer-events: none;
  opacity: 0.88;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.bm-joy[hidden] { display: none; }
.bm-joy.is-on { opacity: 1; transform: scale(1.04); }
.bm-joy span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 12px rgba(60, 30, 10, 0.32);
  transition: transform 0.16s ease-out;
}
.bm-joy.is-on span { transition: none; }
.bm-joy em {
  position: absolute;
  left: 50%;
  top: -24px;
  transform: translateX(-50%);
  color: #fff;
  font: 800 12px/1 var(--font);
  font-style: normal;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(40, 20, 8, 0.7);
}
body.is-coaching .bm-joy::after {
  content: '';
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  border: 3px solid #f2c14e;
  animation: bm-joy-pulse 1.4s ease-out infinite;
}
@keyframes bm-joy-pulse { from { transform: scale(0.9); opacity: 1; } to { transform: scale(1.28); opacity: 0; } }
body.is-phone-full .bm-joy { display: none; }
/* au doigt : le bouton d'action à la hauteur de la manette, à droite ;
   l'aide passe au-dessus des deux */
body.is-touch .bm-prompt {
  bottom: calc(34px + var(--bm-safe-bottom));
  max-width: calc(100vw - 182px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
  padding: 10px 14px 10px 10px;
}
body.is-touch .bm-hint { bottom: calc(176px + var(--bm-safe-bottom)); }
/* petit écran : le nom de la boutique d'abord (le métier est dans le téléphone) */
@media (max-width: 640px) { body.is-touch .bm-prompt-craft { display: none; } }

/* ---------- Consignes du début (première visite) ---------- */
.bm-coach {
  position: fixed;
  z-index: 245;
  left: 50%;
  top: calc(66px + var(--bm-safe-top));
  transform: translateX(-50%);
  width: min(340px, calc(100vw - 32px));
  box-sizing: border-box;
  padding: 14px 16px;
  border-radius: 20px;
  background: #fff;
  color: var(--bm-ink);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 18px 36px -18px rgba(60, 30, 10, 0.5);
  animation: bm-coach-in 0.35s ease-out;
}
.bm-coach[hidden] { display: none; }
@keyframes bm-coach-in { from { transform: translate(-50%, -10px); opacity: 0; } }
.bm-coach-title { margin: 0 0 10px; font: 800 15px/1.3 var(--font); }
.bm-coach ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.bm-coach li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; line-height: 1.35; }
.bm-coach li strong { font-weight: 800; }
.bm-coach li > span:nth-child(2) { transition: opacity 0.3s ease; }
.bm-coach-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: #fbeee4;
}
.bm-coach-ico svg { width: 20px; height: 20px; fill: none; stroke: var(--bm-terra); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bm-coach-ico svg .f { fill: var(--bm-terra); stroke: none; }
.bm-coach-ok {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-left: auto;
  box-sizing: border-box;
  border: 2px solid #e6dcd3;
  border-radius: 50%;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.bm-coach-ok svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.bm-coach li.is-done .bm-coach-ok { background: #2f9e5b; border-color: #2f9e5b; }
.bm-coach li.is-done .bm-coach-ok svg { opacity: 1; }
.bm-coach li.is-done > span:nth-child(2) { opacity: 0.5; }
.bm-coach-btn {
  width: 100%;
  margin-top: 12px;
  padding: 10px;
  border: 0;
  border-radius: 100px;
  background: #f4efe9;
  color: var(--bm-ink);
  font: 700 13.5px/1.2 var(--font);
  cursor: pointer;
}
.bm-coach-btn:focus-visible { outline: 3px solid #f2c14e; outline-offset: 1px; }

/* ---------- Saut « Hopla ! » ---------- */
.bm-flash {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: #fff6ea;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}
.bm-flash.is-on { opacity: 0.92; transition-duration: 0.3s; }

/* ---------- Accueil ---------- */
.bm-intro {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: radial-gradient(120% 80% at 50% 100%, rgba(60, 30, 10, 0.32), rgba(60, 30, 10, 0) 70%);
}
.bm-intro[hidden] { display: none; }
.bm-intro-card {
  width: 100%;
  max-width: 400px;
  box-sizing: border-box;
  padding: 26px 24px 20px;
  background: rgba(255, 252, 247, 0.96);
  border-radius: 26px;
  box-shadow: 0 30px 70px -20px rgba(30, 15, 5, 0.55);
  text-align: center;
  animation: bm-card-in 0.4s cubic-bezier(.2, .9, .3, 1.1);
}
.bm-intro-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 800 12px/1 var(--font);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bm-terra);
}
.bm-intro-kicker .mark { width: 24px; height: 24px; }
.bm-intro h1 { margin: 12px 0 8px; font: 800 30px/1.1 var(--font); letter-spacing: -0.02em; color: var(--ink); }
.bm-intro-count { margin: 0; font: 700 16px/1.4 var(--font); color: var(--bm-ink); }
.bm-intro-help { margin: 8px 0 0; font: 400 14.5px/1.5 var(--font); color: var(--ink-3); }
.bm-intro-guest { margin: 10px 0 0; padding: 9px 12px; border-radius: 12px; background: #f8ece0; font: 500 13px/1.45 var(--font); color: #7a5a44; }
.bm-intro-guest[hidden] { display: none; }
.bm-intro-loading { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; font: 600 14px/1 var(--font); color: #8b7b6e; }
.bm-intro-loading[hidden] { display: none; }
.bm-intro-loading span { width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid #ead8c4; border-top-color: var(--bm-terra); animation: bm-spin 0.8s linear infinite; }
@keyframes bm-spin { to { transform: rotate(360deg); } }
.bm-intro .bm-enter { margin-top: 18px; font-size: 16px; padding: 15px 20px; }
.bm-intro .bm-enter[hidden] { display: none; }
.bm-intro-list { display: inline-block; margin-top: 12px; font: 600 14px/1.3 var(--font); color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; }
.bm-intro.is-error .bm-intro-count { color: var(--ink); }

/* ---------- Fiche de l'emplacement libre ---------- */
.bm-card {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + var(--bm-safe-bottom));
  z-index: 260;
  max-width: 420px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--dc-card-border);
  border-radius: 22px;
  box-shadow: 0 28px 60px -18px rgba(40, 20, 10, 0.5);
  overflow: hidden;
  -webkit-user-select: text;
  user-select: text;
}
.bm-card[hidden] { display: none; }
.bm-card.is-in { animation: bm-card-in 0.24s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes bm-card-in { from { transform: translateY(24px); opacity: 0; } }
@media (min-width: 900px) {
  .bm-card { left: auto; right: 24px; bottom: 24px; width: 380px; }
}
@media (max-width: 899px) {
  .bm-card .bm-enter { margin-top: 12px; padding: 12px 16px; }
}
.bm-card-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}
.bm-card-close svg { width: 16px; height: 16px; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; }
.bm-enter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  margin-top: 14px;
  padding: 13px 18px;
  border: 0;
  border-radius: 100px;
  background: linear-gradient(135deg, #e0722f 0%, #c94d1d 42%, #a63c11 100%);
  color: #fff;
  font: 700 15px/1.2 var(--font);
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 10px 20px -10px rgba(166, 60, 17, 0.6);
}
.bm-enter:focus-visible { outline: 3px solid #f2c14e; outline-offset: 2px; }
.bm-card-free { padding: 22px 20px 18px; }
.bm-card-kicker { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--bm-terra); }
.bm-card-name { margin-top: 6px; font-size: 19px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); padding-right: 30px; }
.bm-card-tagline { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }

/* ---------- Le téléphone : la boutique du stand ----------
   On dit bonjour au marchand, on sort son téléphone : la vraie boutique
   s'y ouvre (iframe, même origine). Téléphone générique dessiné en CSS
   (pas de modèle de marque). Sur un téléphone, il monte du bas de l'écran
   et la scène 3D se met en pause ; sur un grand écran, il se range à
   droite et la balade continue à gauche. */
.bm-phone-wrap {
  position: fixed;
  inset: 0;
  z-index: 280;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: calc(58px + var(--bm-safe-top)) 10px 0;
  box-sizing: border-box;
  background: rgba(36, 22, 12, 0.42);
}
.bm-phone-wrap[hidden] { display: none; }
.bm-phone {
  position: relative;
  width: min(100%, 420px);
  height: 100%;
  box-sizing: border-box;
  padding: 9px 9px 0;
  border-radius: 40px 40px 0 0;
  background: linear-gradient(150deg, #4a3d35 0%, #251c17 45%, #16110e 100%);
  box-shadow: 0 -10px 50px -12px rgba(20, 10, 4, 0.55), inset 0 0 0 1.5px rgba(255, 255, 255, 0.09);
}
/* boutons sur la tranche */
.bm-phone::before,
.bm-phone::after {
  content: '';
  position: absolute;
  width: 4px;
  border-radius: 3px;
  background: #2b221d;
}
.bm-phone::before { right: -3px; top: 120px; height: 64px; }
.bm-phone::after { left: -3px; top: 96px; height: 44px; box-shadow: 0 60px 0 #2b221d; }
.bm-phone-screen {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 32px 32px 0 0;
  background: #fff;
  -webkit-user-select: text;
  user-select: text;
}
.bm-phone-status {
  flex: none;
  position: relative;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 24px 0;
  font: 700 13px/1 var(--font);
  color: var(--ink);
}
.bm-phone-cam {
  position: absolute;
  left: 50%;
  top: 8px;
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
  border-radius: 50%;
  background: #15100d;
  box-shadow: inset 0 0 0 2.5px #2c2420;
}
.bm-phone-icons { display: inline-flex; align-items: center; gap: 5px; }
.bm-phone-icons svg { height: 11px; width: auto; fill: var(--ink); stroke: var(--ink); }
.bm-phone-icons svg:first-child { stroke: none; }
.bm-phone-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 9px 12px;
  border-bottom: 1px solid rgba(18, 18, 28, 0.08);
}
.bm-phone-shop {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}
.bm-phone-logo {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bm-terra);
  color: #fff;
  font: 800 15px/1 var(--font);
  box-shadow: 0 0 0 1px rgba(18, 18, 28, 0.08);
}
.bm-phone-logo img { width: 100%; height: 100%; object-fit: cover; display: block; background: #fff; }
.bm-phone-title { min-width: 0; }
.bm-phone-name {
  font: 800 15px/1.2 var(--font);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bm-phone-chips { display: flex; gap: 5px; margin-top: 3px; }
.bm-phone-chips .dc-badge { font-size: 10.5px; padding: 2px 7px; }
.bm-phone-btn {
  flex: none;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: #f4efe9;
  cursor: pointer;
}
.bm-phone-btn svg { width: 17px; height: 17px; fill: none; stroke: var(--ink); stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.bm-phone-btn:focus-visible { outline: 3px solid #f2c14e; outline-offset: 1px; }
.bm-phone-view { position: relative; flex: 1; min-height: 0; background: #faf6f1; }
.bm-phone-view iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.bm-phone-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #faf6f1;
}
.bm-phone-loading[hidden] { display: none; }
.bm-phone-loading p {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 22px 0 0;
  font: 700 14px/1.3 var(--font);
  color: var(--ink-soft);
}
.bm-phone-loading p span {
  width: 16px;
  height: 16px;
  border: 2.5px solid rgba(200, 80, 44, 0.25);
  border-top-color: var(--bm-terra);
  border-radius: 50%;
  animation: bm-spin 0.8s linear infinite;
}
.bm-phone-home { display: none; }

/* Toutes les créations du stand, coups de cœur d'abord ; « Voir la
   boutique » et « Contacter » restent en bas. */
.bm-phone-list,
.bm-phone-page { position: absolute; inset: 0; display: flex; flex-direction: column; }
.bm-phone-list[hidden],
.bm-phone-page[hidden] { display: none; }
.bm-pl-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 12px 12px 18px;
}
.bm-pl-craft {
  display: inline-flex;
  padding: 4px 11px;
  border-radius: 100px;
  background: #fbe6d8;
  color: #a63c11;
  font: 800 12px/1.3 var(--font);
}
.bm-pl-tagline { margin: 8px 2px 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-3); }
.bm-pl-h { margin: 16px 2px 9px; font: 800 15px/1.3 var(--font); color: var(--bm-ink); }
.bm-pl-h span { margin-left: 3px; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.bm-pl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bm-pl-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(18, 18, 28, 0.07);
  border-radius: 14px;
  background: #fff;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 18px -16px rgba(16, 24, 40, 0.35);
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.bm-pl-card:hover { transform: translateY(-2px); border-color: var(--bm-terra); }
.bm-pl-card:focus-visible { outline: 3px solid #f2c14e; outline-offset: 1px; }
.bm-pl-photo { position: relative; display: block; flex: none; aspect-ratio: 1; min-height: 0; overflow: hidden; background: #f1e8df; }
.bm-pl-photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.bm-pl-photo em {
  position: absolute;
  z-index: 1;
  left: 6px;
  top: 6px;
  padding: 2px 8px;
  border-radius: 100px;
  background: rgba(43, 33, 28, 0.86);
  color: #fff;
  font: 700 10.5px/1.45 var(--font);
  font-style: normal;
}
.bm-pl-card.is-out img { opacity: 0.55; }
.bm-pl-name {
  display: -webkit-box;
  margin: 8px 9px 0;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font: 600 12.5px/1.3 var(--font);
  color: var(--bm-ink);
}
.bm-pl-prices { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; margin: 4px 9px 9px; }
.bm-pl-price { font: 800 13px/1.25 var(--font); color: var(--bm-ink); }
.bm-pl-prices s { font-size: 11.5px; color: var(--ink-soft); }
.bm-pl-grid.is-loading { margin-top: 16px; }
.bm-pl-ghost {
  aspect-ratio: 0.78;
  border-radius: 14px;
  background: linear-gradient(100deg, #f1e8df 30%, #f9f2eb 50%, #f1e8df 70%);
  background-size: 300% 100%;
  animation: bm-ghost 1.2s linear infinite;
}
@keyframes bm-ghost { from { background-position: 100% 0; } to { background-position: 0 0; } }
.bm-pl-empty { margin: 20px 6px; font-size: 13.5px; line-height: 1.45; color: var(--ink-3); text-align: center; }
.bm-pl-foot {
  flex: none;
  display: flex;
  gap: 8px;
  padding: 10px 12px calc(10px + var(--bm-safe-bottom));
  background: #fff;
  border-top: 1px solid rgba(18, 18, 28, 0.07);
}
.bm-phone-wrap.is-side .bm-pl-foot { padding-bottom: 8px; }
.bm-pl-site,
.bm-pl-contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  box-sizing: border-box;
  border-radius: 100px;
  font: 800 15px/1.2 var(--font);
  text-decoration: none;
  cursor: pointer;
}
.bm-pl-site {
  flex: 1.65;
  background: linear-gradient(135deg, #e0722f 0%, #c94d1d 42%, #a63c11 100%);
  color: #fff;
  box-shadow: 0 10px 20px -10px rgba(166, 60, 17, 0.75);
}
.bm-pl-contact {
  flex: 1;
  border: 1.5px solid rgba(43, 33, 28, 0.18);
  background: #fff;
  color: var(--bm-ink);
  font-size: 14px;
}
.bm-pl-site svg,
.bm-pl-contact svg { flex: none; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bm-pl-site:focus-visible,
.bm-pl-contact:focus-visible { outline: 3px solid #f2c14e; outline-offset: 2px; }

/* Une fiche produit ou la page contact dans le téléphone */
.bm-phone-pagebar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  background: #fff;
  border-bottom: 1px solid rgba(18, 18, 28, 0.07);
}
.bm-phone-back,
.bm-phone-big {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 38px;
  border: 0;
  font: 800 14px/1.2 var(--font);
  cursor: pointer;
}
.bm-phone-back { padding: 0 10px 0 2px; background: none; color: var(--bm-terra); }
.bm-phone-big {
  padding: 0 14px;
  border-radius: 100px;
  background: linear-gradient(135deg, #e0722f 0%, #c94d1d 42%, #a63c11 100%);
  color: #fff;
  font-size: 13.5px;
}
.bm-phone-back svg,
.bm-phone-big svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.bm-phone-back:focus-visible,
.bm-phone-big:focus-visible { outline: 3px solid #f2c14e; outline-offset: 1px; }
.bm-phone-frame { position: relative; flex: 1; min-height: 0; }
.bm-phone-wrap.is-in .bm-phone { animation: bm-phone-up 0.42s cubic-bezier(.2, .9, .25, 1.12); }
@keyframes bm-phone-up { from { transform: translateY(70%) rotate(-5deg); opacity: 0.2; } }

/* Grand écran : rangé à droite, la balade continue à gauche */
.bm-phone-wrap.is-side {
  left: auto;
  width: auto;
  padding: 0 28px 0 0;
  align-items: center;
  background: none;
  pointer-events: none;
}
.bm-phone-wrap.is-side .bm-phone {
  pointer-events: auto;
  height: min(86vh, 790px);
  width: max(320px, calc(min(86vh, 790px) * 0.485));
  max-width: none;
  padding: 10px;
  border-radius: 46px;
  box-shadow: 0 34px 70px -24px rgba(20, 10, 4, 0.6), inset 0 0 0 1.5px rgba(255, 255, 255, 0.09);
}
.bm-phone-wrap.is-side .bm-phone-screen { border-radius: 37px; }
.bm-phone-wrap.is-side .bm-phone-home {
  display: flex;
  flex: none;
  height: 20px;
  align-items: center;
  justify-content: center;
  background: #fff;
}
.bm-phone-wrap.is-side .bm-phone-home span { width: 34%; height: 4.5px; border-radius: 3px; background: #1d1714; }
.bm-phone-wrap.is-side.is-in .bm-phone { animation: bm-phone-side 0.46s cubic-bezier(.2, .9, .25, 1.1); }
@keyframes bm-phone-side { from { transform: translateX(115%) rotate(9deg); } }

/* Bulle du marchand */
.bm-bubble.is-vendor {
  background: #fff6e8;
  /* phrase choisie par le vendeur (80 signes au plus) : sur deux lignes */
  white-space: normal;
  width: max-content;
  max-width: min(270px, 72vw);
  text-align: center;
}

/* ---------- Feuilles : Mon perso, infos ---------- */
.bm-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(30, 18, 10, 0.42);
  padding: 12px;
  padding-bottom: calc(12px + var(--bm-safe-bottom));
}
.bm-sheet-backdrop[hidden] { display: none; }
@media (min-width: 700px) { .bm-sheet-backdrop { align-items: center; } }
.bm-sheet {
  position: relative;
  width: 100%;
  max-width: 400px;
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  box-sizing: border-box;
  padding: 22px 20px 20px;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 30px 70px -20px rgba(30, 15, 5, 0.55);
  animation: bm-card-in 0.24s ease-out;
  -webkit-user-select: text;
  user-select: text;
}
.bm-sheet h2 { margin: 12px 0 6px; font-size: 20px; font-weight: 800; letter-spacing: -0.01em; text-align: center; }
.bm-perso-preview {
  position: relative;
  width: 100px;
  height: 150px;
  margin: 26px auto 0;
}
.bm-perso-preview canvas { width: 100%; height: 100%; display: block; }
.bm-perso-preview .bm-tag {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -100%);
  font-size: 11px;
}
.bm-perso-text { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-3); text-align: center; }
.bm-perso-note { margin: 10px 0 0; font-size: 12px; color: var(--ink-soft); text-align: center; }
.bm-perso-warn { margin: -4px 0 10px; padding: 8px 10px; border-radius: 10px; background: #fdecec; color: #8a2c1d; font-size: 12.5px; line-height: 1.4; }
.bm-field { display: block; margin-top: 14px; }
.bm-field > span { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 700; color: var(--ink-3); }
.bm-field input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px;
  border: 1px solid #e4dcd3;
  border-radius: 12px;
  font: 400 16px/1.2 var(--font);
  color: var(--ink);
  outline: none;
}
.bm-field input:focus { border-color: var(--bm-terra); box-shadow: 0 0 0 3px rgba(200, 80, 44, 0.12); }
.bm-swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.bm-swatch {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  padding: 0;
}
.bm-swatch.is-on { box-shadow: 0 0 0 2.5px var(--ink); }
.bm-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.bm-chip {
  padding: 8px 13px;
  border-radius: 100px;
  border: 1px solid #e4dcd3;
  background: #fff;
  font: 600 13px/1.2 var(--font);
  color: var(--ink-3);
  cursor: pointer;
}
.bm-chip.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
/* Code de sauvegarde (Mon perso → Réglages) */
.bm-save { margin-top: 20px; padding-top: 16px; border-top: 1px solid #efe6dc; }
.bm-save h3 { margin: 0; font: 800 15px/1.3 var(--font); color: var(--ink); text-align: center; }
.bm-save .bm-enter { margin-top: 12px; }
.bm-save-code {
  margin: 12px auto 0;
  width: fit-content;
  padding: 10px 18px;
  border-radius: 14px;
  border: 1.5px dashed #d8c4b2;
  background: #fff8f1;
  font: 800 22px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.08em;
  color: var(--ink);
  user-select: all;
  -webkit-user-select: all;
}
.bm-save-acts { justify-content: center; margin-top: 10px; }
.bm-save-msg { min-height: 1em; margin: 8px 0 0; font-size: 12.5px; color: var(--ink-3); text-align: center; }
.bm-save-msg:empty { display: none; }
.bm-save-row { display: flex; gap: 8px; align-items: center; }
.bm-save-row input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: 0.05em; }
.bm-info h2 { text-align: left; margin-top: 4px; padding-right: 36px; }
.bm-info p { margin: 10px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink-3); }
.bm-info-links { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 14px; font-size: 13px; }
.bm-info-links a { color: var(--ink-3); }

/* ---------- Plan de la ville (lot 14) ----------
   Un plan de jeu : panneau de verre sombre, la vraie ville vue du ciel
   au milieu, épingles lumineuses. Téléphone : plein écran, recherche en
   haut, quartiers en bas. Ordinateur (≥ 900 px) : toute la fenêtre, les
   quartiers à gauche, le plan à droite, sans rien faire défiler. */
.bm-mapx {
  --mx-bg: rgba(24, 17, 13, 0.9);
  --mx-line: rgba(255, 196, 150, 0.2);
  --mx-text: #fdf1e4;
  --mx-muted: rgba(253, 241, 228, 0.62);
  --mx-glass: rgba(255, 236, 220, 0.06);
  --mx-glow: #ff9d5c;
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(14, 9, 6, 0.5);
}
.bm-mapx[hidden] { display: none; }
.bm-mapx-panel {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  grid-template-areas: "head" "find" "view" "zones" "help";
  gap: 10px;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 12px calc(10px + var(--bm-safe-bottom));
  box-sizing: border-box;
  background: var(--mx-bg);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
  color: var(--mx-text);
  animation: bm-mapx-in 0.24s ease-out;
}
@keyframes bm-mapx-in { from { opacity: 0; transform: scale(0.985); } to { opacity: 1; transform: none; } }
.bm-mapx-side { display: contents; }
.bm-mapx-head { grid-area: head; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 2px; }
.bm-mapx-kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mx-glow); }
.bm-mapx h2 { margin: 2px 0 0; font-size: 20px; font-weight: 800; letter-spacing: -0.01em; color: var(--mx-text); }
.bm-mapx-close {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--mx-line);
  border-radius: 50%;
  background: var(--mx-glass);
  color: var(--mx-text);
  cursor: pointer;
}
.bm-mapx-close:hover { border-color: var(--mx-glow); }
.bm-mapx-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.bm-map-find {
  grid-area: find;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--mx-line);
  border-radius: 100px;
  background: var(--mx-glass);
  cursor: text;
}
.bm-map-find:focus-within { border-color: var(--mx-glow); box-shadow: 0 0 0 3px rgba(255, 157, 92, 0.18); }
.bm-map-find svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: var(--mx-muted); stroke-width: 2.2; stroke-linecap: round; }
.bm-map-find input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font: 500 16px/1.2 var(--font);
  color: var(--mx-text);
}
.bm-map-find input::placeholder { color: var(--mx-muted); }
.bm-map-find input::-webkit-search-cancel-button { display: none; }
/* résultats : par-dessus le plan sur téléphone, sous la recherche sur ordinateur */
.bm-map-results {
  grid-area: view;
  align-self: start;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px;
  padding: 8px;
  max-height: 55%;
  overflow-y: auto;
  border: 1px solid var(--mx-line);
  border-radius: 16px;
  background: rgba(24, 17, 13, 0.94);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}
.bm-map-results[hidden] { display: none; }
.bm-map-res {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--mx-line);
  border-radius: 12px;
  background: var(--mx-glass);
  font: inherit;
  color: var(--mx-text);
  text-align: left;
  cursor: pointer;
}
.bm-map-res:hover { border-color: var(--mx-glow); }
.bm-map-res > span:nth-child(2) { min-width: 0; }
.bm-map-res b { display: block; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-map-res small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--mx-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-map-res em { margin-left: auto; flex: none; font-style: normal; font-size: 13px; font-weight: 700; color: var(--mx-glow); }
.bm-map-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 0 8px rgba(255, 180, 120, 0.35); }
.bm-map-none { margin: 0; padding: 4px 2px; font-size: 14px; color: var(--mx-muted); }
.bm-mapx-zonebox { grid-area: zones; min-width: 0; }
.bm-mapx-label { display: none; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mx-muted); }
.bm-map-zones {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 4px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.bm-map-zones::-webkit-scrollbar { display: none; }
.bm-map-zone {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid var(--mx-line);
  border-radius: 100px;
  background: var(--mx-glass);
  font: 600 13px/1.2 var(--font);
  color: var(--mx-text);
  white-space: nowrap;
  cursor: pointer;
}
.bm-map-zone:hover, .bm-map-zone.is-hit { border-color: var(--mx-glow); box-shadow: 0 0 0 2px rgba(255, 157, 92, 0.16); }
.bm-map-zone em { font-style: normal; font-weight: 500; color: var(--mx-muted); }
.bm-map-zone .bm-map-dot { width: 10px; height: 10px; }
.bm-map-help { grid-area: help; margin: 0; font-size: 12px; line-height: 1.4; color: var(--mx-muted); text-align: center; }
/* le plan lui-même, dans son cadre lumineux */
.bm-mapx-view {
  grid-area: view;
  position: relative;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--mx-line);
  border-radius: 18px;
  background: #1d1511;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4), 0 0 30px rgba(255, 140, 80, 0.08);
}
.bm-mapx-view canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
}
.bm-mapx-view canvas:active { cursor: grabbing; }
.bm-mapx-glass { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 60px rgba(10, 6, 4, 0.55); }
.bm-mapx-glass::after {
  /* un trait de lumière passe une fois sur le plan à l'ouverture */
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -30%;
  height: 30%;
  background: linear-gradient(180deg, rgba(255, 170, 110, 0), rgba(255, 170, 110, 0.14) 80%, rgba(255, 200, 150, 0.32));
  animation: bm-mapx-scan 1.1s ease-out 0.1s 1 both;
}
@keyframes bm-mapx-scan { from { transform: translateY(0); opacity: 1; } to { transform: translateY(440%); opacity: 0; } }
.bm-mapx-glass i { position: absolute; width: 22px; height: 22px; border: 0 solid rgba(255, 190, 140, 0.8); }
.bm-mapx-glass i:nth-child(1) { top: 8px; left: 8px; border-top-width: 2px; border-left-width: 2px; border-top-left-radius: 8px; }
.bm-mapx-glass i:nth-child(2) { top: 8px; right: 8px; border-top-width: 2px; border-right-width: 2px; border-top-right-radius: 8px; }
.bm-mapx-glass i:nth-child(3) { bottom: 8px; left: 8px; border-bottom-width: 2px; border-left-width: 2px; border-bottom-left-radius: 8px; }
.bm-mapx-glass i:nth-child(4) { bottom: 8px; right: 8px; border-bottom-width: 2px; border-right-width: 2px; border-bottom-right-radius: 8px; }
.bm-mapx-tools { position: absolute; right: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 8px; }
.bm-mapx-tools button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--mx-line);
  border-radius: 12px;
  background: rgba(24, 17, 13, 0.82);
  color: var(--mx-text);
  cursor: pointer;
}
.bm-mapx-tools button:hover { border-color: var(--mx-glow); color: #fff; }
.bm-mapx-tools svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.bm-mapx-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--mx-muted);
  pointer-events: none;
}
.bm-mapx-loading[hidden] { display: none; }
.bm-mapx-loading span { width: 16px; height: 16px; border: 2px solid var(--mx-line); border-top-color: var(--mx-glow); border-radius: 50%; animation: bm-spin 0.8s linear infinite; }
/* ordinateur et grande tablette : toute la fenêtre, quartiers à gauche */
@media (min-width: 900px) and (min-height: 520px) {
  .bm-mapx-panel {
    inset: 18px;
    grid-template-columns: 330px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "side view";
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--mx-line);
    border-radius: 24px;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5), inset 0 0 60px rgba(255, 160, 100, 0.05);
  }
  .bm-mapx-side { grid-area: side; display: flex; flex-direction: column; gap: 12px; min-height: 0; padding: 4px 2px; }
  .bm-map-results { grid-area: auto; align-self: auto; margin: 0; padding: 0; max-height: 40%; flex: none; border: 0; background: none; box-shadow: none; }
  .bm-mapx-zonebox { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
  .bm-mapx-label { display: block; }
  .bm-map-zones { flex-direction: column; overflow-x: hidden; overflow-y: auto; padding: 2px; }
  .bm-map-zone { justify-content: flex-start; padding: 10px 14px; border-radius: 14px; font-size: 14px; }
  .bm-map-zone em { margin-left: auto; }
  .bm-map-help { text-align: left; }
}
/* téléphone en paysage : côte à côte aussi, sans marge */
@media (min-width: 600px) and (max-height: 519px) and (orientation: landscape) {
  .bm-mapx-panel {
    grid-template-columns: 250px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "side view";
    gap: 10px;
    padding: 10px max(10px, env(safe-area-inset-right, 0px)) 10px max(10px, env(safe-area-inset-left, 0px));
  }
  .bm-mapx-side { grid-area: side; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
  .bm-mapx-kicker, .bm-map-help { display: none; }
  .bm-mapx h2 { font-size: 17px; }
  .bm-map-results { grid-area: auto; align-self: auto; margin: 0; padding: 0; max-height: 45%; flex: none; border: 0; background: none; box-shadow: none; }
  .bm-mapx-zonebox { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .bm-map-zones { flex-direction: column; overflow-x: hidden; overflow-y: auto; }
  .bm-map-zone em { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .bm-mapx-panel { animation: none; }
  .bm-mapx-glass::after { display: none; }
}

/* Nom du quartier où l'on entre */
.bm-zone {
  position: fixed;
  left: 50%;
  top: calc(68px + var(--bm-safe-top));
  z-index: 150;
  transform: translateX(-50%);
  width: max-content;
  min-width: 180px;
  max-width: calc(100vw - 40px);
  box-sizing: border-box;
  padding: 9px 18px 11px;
  border-radius: 16px;
  background: rgba(255, 250, 244, 0.95);
  box-shadow: 0 16px 34px -18px rgba(60, 30, 10, 0.55);
  text-align: center;
  pointer-events: none;
  transition: opacity 0.45s;
  animation: bm-zone-in 0.35s ease-out;
}
.bm-zone[hidden] { display: none; }
.bm-zone.is-out { opacity: 0; }
.bm-zone::before { content: ''; display: block; width: 44px; height: 4px; margin: 0 auto 7px; border-radius: 4px; background: var(--zone, #c8502c); }
.bm-zone b { display: block; font: 800 17px/1.2 var(--font); color: var(--bm-ink); }
.bm-zone span { display: block; margin-top: 3px; font: 500 12.5px/1.3 var(--font); color: var(--ink-3); }
@keyframes bm-zone-in { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }

.bm-learn h2 { text-align: left; margin: 12px 0 4px; font-size: 21px; }
.bm-learn-head { display: flex; align-items: center; gap: 12px; padding-right: 36px; }
.bm-learn-head canvas {
  flex: none;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 3px solid #c9a37a;
  box-shadow: 0 0 0 2px #4f2e19;
  background: #fff6e8;
}
.bm-learn-kicker { font: 800 12px/1.3 var(--font); letter-spacing: 0.06em; text-transform: uppercase; color: var(--bm-terra); }
.bm-learn-name { margin-top: 2px; font-size: 14px; font-weight: 600; color: var(--ink-3); }
.bm-learn-body p { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: var(--ink); }
.bm-learn-src { margin: 12px 0 0; font-size: 12px; line-height: 1.45; color: var(--ink-soft); }
.bm-learn-go { flex-direction: column; gap: 2px; width: 100%; margin-top: 16px; padding: 11px 18px; }
.bm-learn-go[hidden] { display: none; }
.bm-learn-n { font-size: 12.5px; font-weight: 600; opacity: 0.85; }
.bm-learn-count { margin: 12px 0 0; font-size: 12.5px; color: var(--ink-3); text-align: center; }

/* ---------- Petits écrans ---------- */
@media (max-width: 640px) {
  .bm-top { left: 10px; right: 10px; gap: 7px; top: calc(10px + var(--bm-safe-top)); }
  .bm-back { padding: 0 10px 0 6px; }
  .bm-back-label { display: none; }
  .bm-back .hopla-logo { display: none; }
  .bm-perso-btn { padding-right: 5px; }
  .bm-perso-btn #bm-perso-label { display: none; }
  .bm-find { padding: 0 14px 0 11px; }
  .bm-find-more, .bm-find-zone { display: none; }
  .bm-sheet { padding: 16px 18px 18px; }
  .bm-perso-preview { width: 80px; height: 120px; margin-top: 22px; }
  .bm-sheet h2 { margin-top: 8px; font-size: 18px; }
  .bm-learn-body p { font-size: 14.5px; }
  .bm-field { margin-top: 11px; }
  .bm-swatch { width: 30px; height: 30px; }
  .bm-chip { padding: 7px 11px; }
  .bm-intro h1 { font-size: 27px; }
}

@media (prefers-reduced-motion: reduce) {
  .bm-card.is-in, .bm-sheet, .bm-intro-card, .bm-prompt, .bm-bubble.is-pop, .bm-zone,
  .bm-phone-wrap.is-in .bm-phone, .bm-phone-wrap.is-side.is-in .bm-phone, .bm-coach,
  body.is-coaching .bm-joy::after, .bm-pl-ghost { animation: none; }
  .bm-flash { transition: none; }
}

/* ---------- Points, récompenses et jeux (lot 5) ---------- */
.bm-perso-btn { position: relative; }
.bm-pts {
  position: absolute;
  right: -6px;
  bottom: -7px;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  box-sizing: border-box;
  border-radius: 10px;
  background: #f2c14e;
  border: 2px solid #fff;
  color: #5a3a10;
  font: 800 11px/16px var(--font);
  text-align: center;
  pointer-events: none;
}
.bm-pts[hidden] { display: none; }
.bm-pts.is-pop { animation: bm-pts-pop 0.5s ease-out; }
@keyframes bm-pts-pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }

.bm-gain {
  position: fixed;
  right: 12px;
  top: calc(66px + var(--bm-safe-top));
  z-index: 240;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: min(320px, calc(100vw - 24px));
  box-sizing: border-box;
  padding: 7px 13px 7px 7px;
  border-radius: 100px;
  background: rgba(255, 250, 244, 0.96);
  box-shadow: 0 14px 30px -16px rgba(60, 30, 10, 0.55);
  pointer-events: none;
  transition: opacity 0.45s;
  animation: bm-gain-in 0.35s ease-out;
}
.bm-gain[hidden] { display: none; }
.bm-gain.is-out { opacity: 0; }
.bm-gain b {
  flex: none;
  padding: 4px 9px;
  border-radius: 100px;
  background: #f2c14e;
  color: #5a3a10;
  font: 800 13px/1 var(--font);
}
.bm-gain.is-new b { background: var(--bm-terra); color: #fff; }
.bm-gain span { font: 600 13px/1.3 var(--font); color: var(--bm-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes bm-gain-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
/* sous le nom du quartier sur téléphone */
@media (max-width: 640px) {
  .bm-gain { top: calc(150px + var(--bm-safe-top)); }
}

.bm-pts-head { margin: 4px auto 0; max-width: 300px; text-align: center; }
.bm-pts-line { display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.bm-pts-line b { font: 800 17px/1.2 var(--font); color: var(--bm-ink); }
.bm-pts-line span { padding: 2px 8px; border-radius: 100px; background: #fbeccd; color: #7a4e12; font: 700 12px/1.4 var(--font); }
.bm-pts-bar { height: 7px; margin-top: 8px; border-radius: 7px; background: #f1e6d7; overflow: hidden; }
.bm-pts-bar i { display: block; height: 100%; border-radius: 7px; background: linear-gradient(90deg, #f2c14e, #e0722f); }
.bm-pts-next { margin: 6px 0 0; font-size: 12.5px; color: var(--ink-3); }

.bm-tabs { display: flex; gap: 4px; margin: 14px 0 2px; padding: 4px; border-radius: 100px; background: #f4ebdf; }
.bm-tab {
  flex: 1;
  padding: 9px 10px;
  border: 0;
  border-radius: 100px;
  background: transparent;
  color: var(--ink-3);
  font: 700 13.5px/1 var(--font);
  cursor: pointer;
}
.bm-tab.is-on { background: #fff; color: var(--bm-ink); box-shadow: 0 2px 6px -2px rgba(60, 30, 10, 0.25); }
.bm-tabpanel .bm-perso-text { margin-top: 14px; font-size: 13.5px; }

.bm-rewards { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.bm-reward-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  border: 1px solid rgba(18, 18, 28, 0.08);
  border-radius: 14px;
  background: #fff;
  color: var(--bm-ink);
  font: 600 14px/1.25 var(--font);
  text-align: left;
}
button.bm-reward-btn { cursor: pointer; }
button.bm-reward-btn:hover { border-color: var(--bm-terra); }
.bm-reward.is-on .bm-reward-btn { border-color: var(--bm-terra); background: #fff6ef; }
.bm-reward-box {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  border: 1.5px solid rgba(58, 42, 32, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bm-reward-box svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.bm-reward.is-on .bm-reward-box { background: var(--bm-terra); border-color: var(--bm-terra); color: #fff; }
.bm-reward-name { flex: 1; }
.bm-reward-pts { flex: none; font-size: 12.5px; font-weight: 700; color: var(--ink-3); }
.bm-reward.is-on .bm-reward-pts { color: var(--bm-terra); }
.bm-reward.is-locked .bm-reward-btn { background: #faf6f0; color: #9a8b7e; }
.bm-reward.is-locked .bm-reward-box { border: 0; color: #b3a596; }
.bm-reward .bm-swatches { margin: 8px 0 2px 12px; }

.bm-game { margin-top: 14px; padding: 14px; border-radius: 16px; background: #fbf6ef; }
.bm-game h3 { display: flex; justify-content: space-between; align-items: baseline; margin: 0; font: 800 15.5px/1.3 var(--font); color: var(--bm-ink); }
.bm-game h3 em { font-style: normal; font-size: 13px; font-weight: 700; color: var(--bm-terra); }
.bm-game > p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-3); }
.bm-hunt { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.bm-hunt li { display: flex; align-items: center; gap: 9px; font: 600 14px/1.25 var(--font); color: var(--bm-ink); }
.bm-hunt li em { display: block; font-style: normal; font-weight: 500; font-size: 12.5px; color: var(--ink-3); }
.bm-hunt-box {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px dashed #c9a24e;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bm-hunt-box svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.bm-hunt li.is-found { color: var(--ink-3); }
.bm-hunt li.is-found .bm-hunt-box { border: 0; background: #6f8f5e; }
.bm-game-btn {
  margin-top: 12px;
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--bm-terra);
  border-radius: 100px;
  background: #fff;
  color: var(--bm-terra);
  font: 700 14px/1 var(--font);
  cursor: pointer;
}
.bm-game-btn:hover { background: #fff3ec; }
.bm-game-done { margin: 10px 0 0; font: 700 13.5px/1.3 var(--font); color: #4f7a3a; }
.bm-earn ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 7px; }
.bm-earn li { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; font-size: 13.5px; color: var(--bm-ink); }
.bm-earn li b { color: #8a5a10; }
.bm-earn li em { grid-column: 1 / -1; font-style: normal; font-size: 12px; color: var(--ink-3); }

.bm-learn-quiz {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  margin-top: 8px;
  padding: 10px 16px;
  border: 1.5px solid #e5c56f;
  border-radius: 100px;
  background: #fff8e6;
  color: #6b4a0f;
  font: 700 14px/1.25 var(--font);
  text-align: center;
  cursor: pointer;
}
.bm-learn-quiz[hidden] { display: none; }
.bm-learn-quiz span { font-size: 12px; font-weight: 500; color: #8a6a2a; }

.bm-quiz { text-align: center; }
.bm-quiz-kicker { margin-top: 6px; font: 800 12px/1.3 var(--font); letter-spacing: 0.04em; text-transform: uppercase; color: var(--bm-terra); }
.bm-quiz-mon { margin-top: 4px; font: 600 13px/1.3 var(--font); color: var(--ink-3); }
.bm-quiz h2 { font-size: 19px; line-height: 1.3; }
.bm-quiz-answers { display: grid; gap: 8px; margin-top: 14px; }
.bm-quiz-a {
  padding: 13px 16px;
  border: 1.5px solid rgba(18, 18, 28, 0.1);
  border-radius: 14px;
  background: #fff;
  color: var(--bm-ink);
  font: 600 15px/1.3 var(--font);
  cursor: pointer;
}
.bm-quiz-a:hover:not(:disabled) { border-color: var(--bm-terra); }
.bm-quiz-a:disabled { cursor: default; opacity: 0.6; }
.bm-quiz-a.is-right { opacity: 1; border-color: #4f7a3a; background: #eef6e8; color: #2f5a22; }
.bm-quiz-a.is-wrong { opacity: 1; border-color: #c0392b; background: #fbecea; color: #8e2a20; }
.bm-quiz-res { margin: 12px 0 0; font: 700 14.5px/1.4 var(--font); }
.bm-quiz-res.is-right { color: #3f6f2f; }
.bm-quiz-res.is-wrong { color: #8e2a20; }
.bm-quiz-note, .bm-quiz-sub { margin: 10px 0 0; font-size: 13px; color: var(--ink-3); }
.bm-quiz .bm-enter { margin-top: 14px; width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .bm-gain, .bm-pts.is-pop { animation: none; }
}

/* ---------- Le petit scénario du marchand (lot 6) ---------- */
.bm-talk {
  position: fixed;
  left: 50%;
  bottom: calc(22px + var(--bm-safe-bottom));
  z-index: 255;
  transform: translateX(-50%);
  width: min(440px, calc(100vw - 32px));
  box-sizing: border-box;
  padding: 14px 16px 16px;
  border-radius: 22px;
  background: #fffaf4;
  border: 1px solid rgba(18, 18, 28, 0.07);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 18px 40px -16px rgba(60, 30, 10, 0.5);
  -webkit-user-select: text;
  user-select: text;
}
.bm-talk[hidden] { display: none; }
.bm-talk.is-in { animation: bm-rise 0.22s ease-out; }
.bm-talk-who {
  font: 800 11.5px/1.3 var(--font);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bm-terra);
}
.bm-talk-q {
  margin: 4px 0 12px;
  font: 800 16px/1.35 var(--font);
  color: var(--bm-ink);
}
.bm-talk-answers { display: flex; flex-wrap: wrap; gap: 8px; }
.bm-talk-a {
  min-height: 40px;
  padding: 9px 16px;
  border: 1.5px solid var(--bm-terra);
  border-radius: 100px;
  background: #fff;
  color: var(--bm-terra);
  font: 700 14px/1.2 var(--font);
  cursor: pointer;
}
.bm-talk-a:hover, .bm-talk-a:focus-visible { background: var(--bm-terra); color: #fff; outline: none; }
.bm-talk-a.is-look { border-color: rgba(58, 42, 32, 0.22); color: var(--bm-ink); background: transparent; }
.bm-talk-a.is-look:hover, .bm-talk-a.is-look:focus-visible { background: rgba(58, 42, 32, 0.08); color: var(--bm-ink); }
body.is-touch .bm-talk { bottom: calc(18px + var(--bm-safe-bottom)); }
body.is-talking .bm-joy, body.is-talking .bm-prompt { display: none; }

/* « Voir toutes ses créations » sous la catégorie demandée */
.bm-pl-all {
  display: block;
  width: 100%;
  margin: 14px 0 6px;
  padding: 12px 14px;
  border: 1.5px solid rgba(58, 42, 32, 0.16);
  border-radius: 14px;
  background: #fff;
  color: var(--bm-ink);
  font: 700 13.5px/1.2 var(--font);
  cursor: pointer;
}
.bm-pl-all span { color: var(--ink-soft); font-weight: 600; margin-left: 4px; }

/* ---------- Aperçu du stand dans le dashboard ---------- */
body.is-preview .bm-top,
body.is-preview .bm-zone,
body.is-preview .bm-gain,
body.is-preview .bm-coach,
body.is-preview .bm-tag,
body.is-preview .bm-joy { display: none !important; }
body.is-preview .bm-prompt,
body.is-preview.is-touch .bm-prompt { right: 10px; bottom: 10px; max-width: calc(100vw - 20px); padding: 7px 14px; border-radius: 100px; }
body.is-preview .bm-prompt-ico { display: none; }
body.is-preview .bm-prompt-act { font-size: 12.5px; }
/* la petite question tient dans le cadre de l'aperçu */
body.is-preview .bm-talk,
body.is-preview.is-touch .bm-talk { bottom: 8px; width: calc(100vw - 16px); padding: 9px 11px 11px; border-radius: 16px; }
body.is-preview .bm-talk-q { margin: 2px 0 8px; font-size: 13.5px; }
body.is-preview .bm-talk-answers { gap: 6px; }
body.is-preview .bm-talk-a { min-height: 30px; padding: 6px 11px; font-size: 12px; }
.bm-preview-tag {
  position: fixed;
  left: 12px;
  top: 12px;
  z-index: 160;
  padding: 6px 12px;
  border-radius: 100px;
  background: rgba(43, 33, 28, 0.86);
  color: #fff;
  font: 700 12px/1.3 var(--font);
  pointer-events: none;
}
.bm-preview-tag[hidden] { display: none; }

/* ---------- Le sac commun (lot 7) ---------- */
.bm-bag-btn { position: relative; }
.bm-bag-btn svg { stroke-linejoin: round; }
.bm-bag-n {
  position: absolute;
  right: -5px;
  top: -5px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  box-sizing: border-box;
  border-radius: 10px;
  background: var(--bm-terra);
  border: 2px solid #fff;
  color: #fff;
  font: 800 11px/16px var(--font);
  text-align: center;
  pointer-events: none;
}
.bm-bag-n[hidden] { display: none; }
.bm-bag-btn.is-pop { animation: bm-pts-pop 0.5s ease-out; }
.bm-sheet.bm-bag { max-width: 440px; }
.bm-bag-intro { margin: 2px 0 12px; font-size: 13.5px; line-height: 1.45; color: var(--ink-3); text-align: center; }
.bm-bag-empty { margin: 8px 0 16px; font-size: 14.5px; line-height: 1.5; color: var(--ink-3); text-align: center; }
.bm-bag-done {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 6px 0 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: #e5f4e4;
  color: #24452a;
}
.bm-bag-done svg { width: 22px; height: 22px; flex-shrink: 0; fill: none; stroke: #2f7a3e; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.bm-bag-done p { margin: 0; font-size: 13.5px; line-height: 1.45; }
.bm-bag-note { margin: 6px 0 12px; padding: 11px 14px; border-radius: 16px; background: #f9eeda; color: #5a3d14; font-size: 13.5px; line-height: 1.45; }
.bm-bag-shop {
  margin-top: 12px;
  padding: 12px 14px 14px;
  border: 1px solid rgba(18, 18, 28, 0.08);
  border-radius: 18px;
  background: #fffaf4;
}
.bm-bag-head { display: flex; align-items: center; gap: 10px; }
.bm-bag-shopname { flex: 1; min-width: 0; font: 800 15px/1.25 var(--font); color: var(--bm-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-bag-go {
  flex-shrink: 0;
  padding: 6px 11px;
  border: 1px solid rgba(58, 42, 32, 0.18);
  border-radius: 100px;
  background: #fff;
  color: var(--bm-ink);
  font: 700 12px/1.2 var(--font);
  cursor: pointer;
}
.bm-bag-go:hover { border-color: var(--bm-terra); }
.bm-bag-items { list-style: none; margin: 10px 0 0; padding: 0; }
.bm-bag-item { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid rgba(18, 18, 28, 0.06); }
.bm-bag-item:first-child { border-top: 0; }
.bm-bag-photo { width: 44px; height: 44px; flex-shrink: 0; border-radius: 10px; background: #f1e6d7; overflow: hidden; }
.bm-bag-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bm-bag-what { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bm-bag-name { font: 600 13.5px/1.3 var(--font); color: var(--bm-ink); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.bm-bag-what small { font-size: 12px; line-height: 1.3; color: var(--ink-soft); }
.bm-bag-price { flex-shrink: 0; font: 700 13.5px/1.2 var(--font); color: var(--bm-ink); }
.bm-bag-rm {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.bm-bag-rm:hover { background: rgba(58, 42, 32, 0.08); }
.bm-bag-rm svg { width: 15px; height: 15px; stroke: var(--ink-3); stroke-width: 2.2; stroke-linecap: round; }
.bm-bag-sub { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 8px; padding-top: 9px; border-top: 1px dashed rgba(58, 42, 32, 0.16); font-size: 13.5px; color: var(--ink-3); }
.bm-bag-sub small { font-size: 12px; color: var(--ink-soft); }
.bm-bag-sub b { font: 800 15px/1.2 var(--font); color: var(--bm-ink); }
.bm-bag .bm-bag-pay { margin-top: 12px; width: 100%; }
.bm-bag-pay-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-bag .bm-bag-pay.is-next { background: #fff; color: var(--bm-terra); border: 1.5px solid var(--bm-terra); box-shadow: none; }
.bm-bag-total { margin: 14px 0 0; font-size: 13.5px; text-align: center; color: var(--ink-3); }
.bm-bag-total b { color: var(--bm-ink); }

/* ---------- Sons : le haut-parleur de la barre du haut ---------- */
.bm-sound-btn svg { stroke-linejoin: round; }
.bm-sound-btn .bm-sound-off,
.bm-sound-btn.is-off .bm-sound-on { display: none; }
.bm-sound-btn.is-off .bm-sound-off { display: block; }
.bm-sound-btn.is-off { color: var(--ink-3); }
.bm-sound-btn[hidden] { display: none; }
.bm-tab { white-space: nowrap; }
@media (max-width: 640px) {
  .bm-tab { padding: 9px 6px; font-size: 12.5px; }
}

/* ---------- Les autres visiteurs et la discussion (lot 12) ---------- */
.bm-peers { position: fixed; inset: 0; z-index: 148; pointer-events: none; overflow: hidden; }
.bm-peer-tag,
.bm-peer-say {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  will-change: transform;
}
.bm-peer-tag {
  padding: 2px 8px;
  border-radius: 100px;
  background: rgba(255, 250, 244, 0.94);
  border: 2px solid var(--peer, #4f7397);
  color: var(--bm-ink);
  font: 800 10.5px/1.3 var(--font);
  box-shadow: 0 3px 8px rgba(60, 30, 10, 0.22);
}
.bm-peer-say {
  max-width: 220px;
  padding: 7px 11px;
  border-radius: 13px;
  background: #fff;
  color: var(--bm-ink);
  font: 700 13px/1.3 var(--font);
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
  box-shadow: 0 8px 20px -8px rgba(60, 30, 10, 0.45);
}
.bm-peer-say::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  margin-left: -6px;
  border: 6px solid transparent;
  border-top-color: #fff;
}
.bm-peer-say b { display: block; font-size: 10.5px; color: var(--peer, #4f7397); }
.bm-peer-tag[hidden], .bm-peer-say[hidden] { display: none; }

.bm-chat-btn {
  position: fixed;
  left: 16px;
  top: calc(66px + var(--bm-safe-top));
  z-index: 200;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 13px 0 11px;
  border-radius: 100px;
  border: 1px solid rgba(90, 50, 20, 0.12);
  background: var(--bm-glass);
  color: var(--bm-ink);
  font: 700 13.5px/1 var(--font);
  box-shadow: 0 8px 22px -12px rgba(60, 30, 10, 0.45);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  cursor: pointer;
}
.bm-chat-btn[hidden] { display: none; }
.bm-chat-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.bm-chat-n {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  box-sizing: border-box;
  border-radius: 10px;
  background: #4f7397;
  color: #fff;
  font: 800 11px/20px var(--font);
  text-align: center;
}
.bm-chat-n[hidden], .bm-chat-dot[hidden] { display: none; }
.bm-chat-dot {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bm-terra);
  border: 2px solid #fff;
}
.bm-chat-btn.is-pop { animation: bm-pts-pop 0.5s ease-out; }
body.is-chatting .bm-chat-btn { display: none; }

.bm-chat {
  position: fixed;
  left: 16px;
  bottom: calc(24px + var(--bm-safe-bottom));
  z-index: 260;
  display: flex;
  flex-direction: column;
  width: 340px;
  max-height: min(440px, 58vh);
  box-sizing: border-box;
  padding: 12px 12px 10px;
  border-radius: 20px;
  background: #fffaf4;
  border: 1px solid rgba(18, 18, 28, 0.07);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 18px 40px -16px rgba(60, 30, 10, 0.5);
  animation: bm-rise 0.2s ease-out;
  -webkit-user-select: text;
  user-select: text;
}
.bm-chat[hidden] { display: none; }
.bm-chat-head { display: flex; align-items: flex-start; gap: 10px; padding: 0 2px 8px; }
.bm-chat-head > div { flex: 1; min-width: 0; }
.bm-chat-head h2 { margin: 0; font: 800 15.5px/1.25 var(--font); color: var(--bm-ink); }
.bm-chat-head p { margin: 2px 0 0; font: 500 12.5px/1.35 var(--font); color: var(--ink-3); }
.bm-chat-wave {
  flex: none;
  height: 32px;
  padding: 0 12px;
  border: 1.5px solid var(--bm-terra);
  border-radius: 100px;
  background: #fff;
  color: var(--bm-terra);
  font: 700 12.5px/1 var(--font);
  cursor: pointer;
}
.bm-chat-wave[hidden] { display: none; }
.bm-chat-wave:hover, .bm-chat-wave:focus-visible { background: var(--bm-terra); color: #fff; outline: none; }
.bm-chat-x {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: rgba(58, 42, 32, 0.07);
  cursor: pointer;
}
.bm-chat-x svg { width: 16px; height: 16px; stroke: var(--bm-ink); stroke-width: 2.4; stroke-linecap: round; }
.bm-chat-rules { padding: 10px 12px 12px; border-radius: 14px; background: #fff; border: 1px solid rgba(18, 18, 28, 0.07); font-size: 13px; line-height: 1.45; color: var(--ink); }
.bm-chat-rules[hidden] { display: none; }
.bm-chat-rules p { margin: 0 0 6px; }
.bm-chat-rules ul { margin: 0 0 10px; padding-left: 18px; }
.bm-chat-rules li { margin: 3px 0; }
.bm-chat-rules .bm-enter { width: 100%; padding: 10px 16px; font-size: 14.5px; }
.bm-chat-list {
  flex: 1;
  min-height: 60px;
  margin: 0;
  padding: 2px 2px 6px;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.bm-chat-list[hidden] { display: none; }
.bm-chat-msg { position: relative; padding: 5px 34px 5px 8px; border-radius: 10px; font: 500 14px/1.38 var(--font); color: var(--ink); overflow-wrap: anywhere; }
.bm-chat-msg + .bm-chat-msg { margin-top: 2px; }
.bm-chat-msg b { font-weight: 800; color: var(--peer, #4f7397); margin-right: 5px; }
.bm-chat-msg.is-me { background: rgba(200, 80, 44, 0.07); }
.bm-chat-msg.is-me b { color: var(--bm-terra); }
.bm-chat-more {
  position: absolute;
  top: 3px;
  right: 2px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  opacity: 0.55;
}
.bm-chat-more:hover, .bm-chat-more:focus-visible { opacity: 1; background: rgba(58, 42, 32, 0.07); }
.bm-chat-more svg { width: 16px; height: 16px; fill: var(--bm-ink); }
.bm-chat-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.bm-chat-acts button {
  padding: 6px 11px;
  border: 1.5px solid rgba(58, 42, 32, 0.18);
  border-radius: 100px;
  background: #fff;
  color: var(--bm-ink);
  font: 700 12.5px/1.2 var(--font);
  cursor: pointer;
}
.bm-chat-acts button.is-warn { border-color: #b91c1c; color: #b91c1c; }
.bm-chat-note { margin: 4px 0 0; font: 600 12px/1.35 var(--font); color: #2f6b3a; }
.bm-chat-empty { padding: 14px 8px; font: 500 13px/1.45 var(--font); color: var(--ink-3); text-align: center; }
.bm-chat-err { margin: 0 2px 6px; font: 600 12.5px/1.35 var(--font); color: #b91c1c; }
.bm-chat-err[hidden] { display: none; }
.bm-chat-form { display: flex; gap: 8px; padding-top: 6px; border-top: 1px solid rgba(58, 42, 32, 0.08); }
.bm-chat-form[hidden] { display: none; }
.bm-chat-form input {
  flex: 1;
  min-width: 0;
  height: 42px;
  padding: 0 14px;
  border: 1.5px solid rgba(58, 42, 32, 0.16);
  border-radius: 100px;
  background: #fff;
  color: var(--bm-ink);
  font: 500 16px/1 var(--font);
}
.bm-chat-form input:focus { outline: none; border-color: var(--bm-terra); }
.bm-chat-form button {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #e0722f 0%, #c94d1d 42%, #a63c11 100%);
  cursor: pointer;
}
.bm-chat-form button:disabled { opacity: 0.5; cursor: default; }
.bm-chat-form button svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* au doigt : en bas, sur toute la largeur ; la manette et le bouton
   d'action laissent la place (le clavier monte : --bm-kb) */
body.is-touch .bm-chat,
.bm-chat.is-narrow {
  left: 8px;
  right: 8px;
  width: auto;
  bottom: calc(8px + var(--bm-kb, 0px) + var(--bm-safe-bottom));
  max-height: min(400px, 48vh);
}
body.is-chatting.is-touch .bm-joy, body.is-chatting.is-touch .bm-prompt { display: none; }
body.is-preview .bm-chat-btn, body.is-preview .bm-chat, body.is-preview .bm-peers { display: none !important; }
@media (max-width: 640px) {
  .bm-chat-btn { left: 10px; top: calc(62px + var(--bm-safe-top)); height: 38px; padding: 0 10px; }
  .bm-chat-label { display: none; }
  .bm-peer-say { max-width: 170px; font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .bm-chat, .bm-chat-btn.is-pop { animation: none; }
}

/* ---------- Rue des vendeurs (lot 15) : en entrant dans un bâtiment ---------- */
.bm-card-mairie {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 8px;
  border: 0;
  background: none;
  color: #2f4b3f;
  font: 700 13.5px/1.3 var(--font);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.bm-bat { --bat: #2f4b3f; max-width: 440px; padding-top: 20px; }
.bm-bat.is-wide { max-width: 720px; }
@media (max-width: 699px) {
  .bm-bat.is-wide { max-height: calc(100dvh - 24px); }
}
.bm-bat-head { display: flex; align-items: center; gap: 12px; padding-right: 40px; }
.bm-bat-npc {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 35%, #fff7ec 0%, #f3e3cc 100%);
  box-shadow: inset 0 0 0 3px var(--bat), 0 6px 14px -8px rgba(30, 15, 5, 0.5);
}
.bm-bat-npc canvas { width: 100%; height: 100%; display: block; }
.bm-bat-kicker { font: 800 12px/1.3 var(--font); letter-spacing: 0.06em; text-transform: uppercase; color: var(--bat); }
.bm-bat h2 { margin: 2px 0 0; text-align: left; font-size: 21px; }
.bm-bat-bubble {
  position: relative;
  margin: 14px 0 4px;
  padding: 10px 14px 11px;
  border-radius: 16px;
  background: #fbf3e6;
  border: 1px solid #efdfc7;
}
.bm-bat-bubble::before {
  content: '';
  position: absolute;
  left: 26px;
  top: -8px;
  width: 14px;
  height: 14px;
  background: #fbf3e6;
  border-left: 1px solid #efdfc7;
  border-top: 1px solid #efdfc7;
  transform: rotate(45deg);
}
.bm-bat-who { display: block; font: 800 12px/1.2 var(--font); color: var(--bat); }
.bm-bat-bubble p { position: relative; margin: 3px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--ink); }
.bm-bat-body { margin-top: 8px; }
.bm-bat-p { margin: 12px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-3); }
.bm-bat-note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); }
.bm-bat-note a { color: #2f4b3f; font-weight: 700; }
.bm-bat-err { margin: 10px 0 0; padding: 8px 10px; border-radius: 10px; background: #fdecec; color: #8a2c1d; font-size: 13px; line-height: 1.4; }
.bm-bat-go { margin-top: 14px; }
.bm-bat-go[disabled] { opacity: 0.6; cursor: default; }
.bm-bat-go.is-soft { background: #f3ece2; color: var(--ink); box-shadow: none; }
.bm-bat-link {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 6px;
  border: 0;
  background: none;
  color: var(--ink-3);
  font: 600 13px/1.35 var(--font);
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  box-sizing: border-box;
}
.bm-bat-out { margin-top: 14px; color: var(--ink-soft); font-size: 12.5px; }
.bm-bat-form .bm-field input { font-size: 16px; }
.bm-bat-cta { margin-top: 4px; }
.bm-bat-sep { display: flex; align-items: center; gap: 10px; margin: 18px 0 2px; color: var(--ink-soft); font-size: 12.5px; font-weight: 700; }
.bm-bat-sep::before, .bm-bat-sep::after { content: ''; flex: 1; height: 1px; background: #eadfd2; }
.bm-bat-loading { display: flex; align-items: center; gap: 10px; padding: 18px 4px; color: var(--ink-3); font-size: 14px; }
.bm-bat-spin {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2.5px solid #eadfd2;
  border-top-color: var(--bat);
  animation: bm-spin 0.8s linear infinite;
}
.bm-bat-shop {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 12px;
  background: #f6f1ea;
  font-size: 14px;
  min-width: 0;
}
.bm-bat-shop-k { flex: none; font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.bm-bat-shop strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-bat-shop select {
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid #e4dcd3;
  border-radius: 10px;
  background: #fff;
  font: 600 16px/1.2 var(--font);
  color: var(--ink);
}
.bm-bat-tabs { display: grid; gap: 8px; margin-top: 14px; }
.bm-bat-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  box-sizing: border-box;
  padding: 11px 40px 11px 14px;
  border: 1px solid #ece3d8;
  border-left: 4px solid var(--bat);
  border-radius: 14px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  font-family: var(--font);
}
.bm-bat-tab:hover { border-color: var(--bat); }
.bm-bat-tab:focus-visible { outline: 3px solid #f2c14e; outline-offset: 2px; }
.bm-bat-tab strong { font-size: 15px; color: var(--ink); }
.bm-bat-tab span { font-size: 12.5px; line-height: 1.35; color: var(--ink-soft); }
.bm-bat-ext { position: absolute; right: 14px; top: 50%; width: 16px; height: 16px; margin-top: -8px; fill: none; stroke: var(--ink-soft); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bm-bat-view {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
  padding: 10px;
  border-radius: 100px;
  background: #f3ece2;
  color: var(--ink);
  font: 700 14px/1.2 var(--font);
  text-decoration: none;
}
.bm-bat-quest { margin-top: 12px; padding: 12px 14px 6px; border-radius: 16px; background: #fff8ee; border: 1px solid #f0e0c6; }
.bm-bat-quest-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.bm-bat-quest-h strong { font-size: 15px; }
.bm-bat-quest-h span { font-size: 12.5px; font-weight: 700; color: var(--bm-terra); white-space: nowrap; }
.bm-bat-step { display: flex; align-items: center; gap: 10px; min-height: 40px; border-top: 1px solid #f2e6d4; }
.bm-bat-step:first-of-type { border-top: 0; }
.bm-bat-check { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #d9c7ad; box-sizing: border-box; }
.bm-bat-step.is-done .bm-bat-check { border-color: #4f8a5b; background: #4f8a5b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 12.5l4 4 9-9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.bm-bat-step-l { flex: 1; min-width: 0; font-size: 14px; line-height: 1.35; }
.bm-bat-step.is-done .bm-bat-step-l { color: var(--ink-soft); }
.bm-bat-step-ok { font-size: 12px; font-weight: 700; color: #4f8a5b; }
.bm-bat-step-go {
  flex: none;
  padding: 6px 12px;
  border: 0;
  border-radius: 100px;
  background: var(--bm-terra);
  color: #fff;
  font: 700 12.5px/1.2 var(--font);
  cursor: pointer;
  white-space: nowrap;
}
/* la banque */
.bm-bank-vault {
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: 18px;
  background: linear-gradient(160deg, #2f6b57 0%, #244f41 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.bm-bank-row { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 4px 0; }
.bm-bank-row span { font-size: 13px; font-weight: 600; opacity: 0.85; }
.bm-bank-row strong { font-size: 24px; font-weight: 800; letter-spacing: -0.01em; }
.bm-bank-row.is-soft strong { font-size: 17px; opacity: 0.9; }
.bm-bank-coins { position: absolute; left: 42%; top: 50%; transform: translateY(-50%); width: 60px; height: 40px; opacity: 0.16; pointer-events: none; }
.bm-bank-coins i { position: absolute; width: 26px; height: 26px; border-radius: 50%; background: #f2c14e; border: 3px solid #fff3c4; }
.bm-bank-coins i:nth-child(1) { left: 0; top: 14px; }
.bm-bank-coins i:nth-child(2) { left: 18px; top: 4px; }
.bm-bank-coins i:nth-child(3) { left: 34px; top: 16px; }
.bm-bank-pays { margin-top: 12px; font-size: 13px; }
.bm-bank-pays > strong { display: block; margin-bottom: 4px; font-size: 13.5px; }
.bm-bank-pay { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; padding: 6px 0; border-top: 1px solid #f1e8dc; color: var(--ink-3); }
.bm-bank-pay strong { color: var(--ink); }
.bm-bank-docs { display: grid; gap: 8px; margin-top: 10px; }
.bm-bank-docs > div { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink); }
.bm-bank-doc { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #edf4f0; }
.bm-bank-doc svg { width: 20px; height: 20px; fill: none; stroke: #2f6b57; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bm-bank-stamp {
  margin: 16px auto 4px;
  width: max-content;
  padding: 8px 16px;
  border: 3px solid #2f6b57;
  border-radius: 10px;
  color: #2f6b57;
  font: 800 15px/1.2 var(--font);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transform: rotate(-4deg);
}
.bm-bank-embed { margin-top: 12px; min-height: 160px; }
@media (prefers-reduced-motion: reduce) {
  .bm-bat-spin { animation-duration: 2.4s; }
}

/* ---------- Lot 16 : champs, atelier, centre de livraison ---------- */
.bm-field textarea, .bm-field select {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px;
  border: 1px solid #e4dcd3;
  border-radius: 12px;
  background: #fff;
  font: 400 16px/1.4 var(--font);
  color: var(--ink);
  outline: none;
}
.bm-field textarea { resize: vertical; min-height: 84px; }
.bm-field select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 38px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%235b4a3d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 12px center / 18px no-repeat;
  cursor: pointer;
}
.bm-field textarea:focus, .bm-field select:focus { border-color: var(--bm-terra); box-shadow: 0 0 0 3px rgba(200, 80, 44, 0.12); }

/* les postes de travail (atelier) et le tapis (livraison) */
.bm-atl-bench { list-style: none; display: flex; margin: 14px 0 4px; padding: 0; position: relative; }
.bm-atl-bench::before { content: ''; position: absolute; left: 16.6%; right: 16.6%; top: 17px; height: 3px; border-radius: 3px; background: #eadfd2; }
.bm-atl-st { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bm-atl-dot, .bm-liv-dot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid #e4d6c4;
  background: #fff;
  transition: background 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.bm-atl-dot svg, .bm-liv-dot svg { width: 18px; height: 18px; fill: none; stroke: var(--ink-soft); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bm-atl-st em, .bm-liv-stop em { font: 700 11.5px/1.2 var(--font); font-style: normal; color: var(--ink-soft); }
.bm-atl-st.is-cur .bm-atl-dot, .bm-liv-stop.is-cur .bm-liv-dot { border-color: var(--bm-terra); background: #fff1e8; box-shadow: 0 0 0 4px rgba(200, 80, 44, 0.14); }
.bm-atl-st.is-cur .bm-atl-dot svg, .bm-liv-stop.is-cur .bm-liv-dot svg { stroke: var(--bm-terra); }
.bm-atl-st.is-cur em, .bm-liv-stop.is-cur em { color: var(--ink); }
.bm-atl-st.is-done .bm-atl-dot, .bm-liv-stop.is-done .bm-liv-dot { border-color: #4f8a5b; background: #4f8a5b; }
.bm-atl-st.is-done .bm-atl-dot svg, .bm-liv-stop.is-done .bm-liv-dot svg { stroke: #fff; }
.bm-atl-view, .bm-liv-view { animation: bm-card-in 0.22s ease-out; }

.bm-atl-card { margin-top: 12px; padding: 12px; border-radius: 18px; background: #fffaf4; border: 1px solid rgba(18, 18, 28, 0.07); }
.bm-atl-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.bm-atl-ph { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: #f3ece2; }
.bm-atl-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bm-atl-ph em { position: absolute; left: 6px; bottom: 6px; padding: 2px 7px; border-radius: 100px; background: rgba(30, 18, 10, 0.72); color: #fff; font: 700 10.5px/1.4 var(--font); font-style: normal; }
.bm-atl-ph.is-up { display: grid; place-items: center; }
.bm-atl-del {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  font: 700 17px/1 var(--font);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
.bm-atl-add {
  position: relative;
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 110px;
  padding: 14px;
  border: 2px dashed #e0c9ad;
  border-radius: 14px;
  background: #fff;
  text-align: center;
  cursor: pointer;
}
.bm-atl-photos > .bm-atl-add:first-child { grid-column: 1 / -1; min-height: 150px; }
.bm-atl-add:hover { border-color: var(--bm-terra); }
.bm-atl-add svg { width: 30px; height: 30px; fill: none; stroke: var(--bm-terra); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bm-atl-add strong { font-size: 14.5px; color: var(--ink); }
.bm-atl-add small { font-size: 12px; color: var(--ink-soft); }
.bm-atl-add input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.bm-atl-add:focus-within { outline: 3px solid #f2c14e; outline-offset: 2px; }
.bm-atl-go { display: flex; flex-direction: column; align-items: center; margin-top: 4px; }
.bm-atl-ai svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linejoin: round; }
.bm-enter[disabled] { opacity: 0.5; cursor: default; box-shadow: none; }
.bm-atl-quota { margin-top: 8px; font-size: 12.5px; line-height: 1.4; color: var(--ink-soft); text-align: center; }
.bm-atl-think .bm-atl-ph img { animation: bm-atl-scan 1.4s ease-in-out infinite alternate; }
@keyframes bm-atl-scan { from { filter: saturate(0.6) brightness(0.95); } to { filter: saturate(1.15) brightness(1.06); } }

.bm-atl-fiche { margin-top: 12px; }
.bm-atl-prev { display: flex; align-items: center; gap: 12px; }
.bm-atl-prev img, .bm-atl-noimg { flex: none; width: 72px; height: 72px; border-radius: 14px; object-fit: cover; display: block; }
.bm-atl-noimg { display: grid; place-items: center; background: #f3ece2; }
.bm-atl-noimg svg { width: 30px; height: 30px; fill: none; stroke: var(--ink-soft); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bm-atl-prev .bm-bat-link { width: auto; margin: 0; text-align: left; }
.bm-atl-check { margin-top: 14px; padding: 10px 12px; border-radius: 14px; background: #fff8ee; border: 1px solid #f0e0c6; font-size: 13px; line-height: 1.4; color: #6b4a1c; }
.bm-atl-check strong { display: block; margin-bottom: 2px; color: #7a4e12; }
.bm-atl-check span { display: block; padding-left: 14px; position: relative; }
.bm-atl-check span::before { content: ''; position: absolute; left: 3px; top: 0.6em; width: 5px; height: 5px; border-radius: 50%; background: #d9a441; }
.bm-atl-2, .bm-liv-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bm-atl-unit, .bm-liv-unit { position: relative; display: block; }
.bm-atl-unit input, .bm-liv-unit input { padding-right: 34px; }
.bm-atl-unit em, .bm-liv-unit em { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font: 700 14px/1 var(--font); font-style: normal; color: var(--ink-soft); pointer-events: none; }
.bm-liv-unit input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 34px 11px 14px;
  border: 1px solid #e4dcd3;
  border-radius: 12px;
  font: 400 16px/1.2 var(--font);
  color: var(--ink);
  outline: none;
}
.bm-liv-unit input:focus { border-color: var(--bm-terra); box-shadow: 0 0 0 3px rgba(200, 80, 44, 0.12); }
.bm-atl-hint { margin: 6px 0 0; font-size: 12.5px; color: var(--ink-soft); }

/* interrupteurs */
.bm-atl-vis, .bm-liv-tog {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid #ece3d8;
  border-radius: 14px;
  background: #fff;
  font-family: var(--font);
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
}
.bm-liv-tog { margin-top: 0; padding: 12px 0; border: 0; border-top: 1px solid #f1e8dc; border-radius: 0; background: none; }
.bm-liv-card > .bm-liv-tog:first-child { border-top: 0; }
.bm-liv-tog[disabled] { cursor: default; opacity: 0.75; }
.bm-atl-vis > span, .bm-liv-tog-t { flex: 1; min-width: 0; }
.bm-atl-vis strong, .bm-liv-tog-t strong { display: block; font-size: 14.5px; color: var(--ink); }
.bm-atl-vis small, .bm-liv-tog-t small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.35; color: var(--ink-soft); }
.bm-atl-vis i, .bm-liv-sw { flex: none; position: relative; width: 44px; height: 26px; border-radius: 13px; background: #dccfbf; transition: background 0.2s; }
.bm-atl-vis i::after, .bm-liv-sw::after { content: ''; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); transition: transform 0.2s; }
.bm-atl-vis.is-on i, .bm-liv-tog.is-on .bm-liv-sw { background: #4f8a5b; }
.bm-atl-vis.is-on i::after, .bm-liv-tog.is-on .bm-liv-sw::after { transform: translateX(18px); }
.bm-atl-vis:focus-visible, .bm-liv-tog:focus-visible { outline: 3px solid #f2c14e; outline-offset: 2px; }

/* bas de chaque poste : retour à gauche, suite à droite */
.bm-liv-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.bm-liv-nav .bm-bat-link { width: auto; margin: 0; padding: 6px 2px; }
.bm-liv-next { flex: none; width: auto; margin-top: 0; padding: 12px 22px; }

.bm-atl-done { margin-top: 12px; }
.bm-atl-tag {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 18px;
  background: #fffaf4;
  border: 1px solid rgba(18, 18, 28, 0.07);
}
.bm-atl-tag img, .bm-atl-tag .bm-atl-noimg { width: 88px; height: 88px; }
.bm-atl-tag > div { min-width: 0; padding-bottom: 22px; }
.bm-atl-tag strong { display: block; font-size: 15.5px; line-height: 1.3; color: var(--ink); }
.bm-atl-tag b { display: block; margin-top: 4px; font-size: 18px; color: var(--bm-terra); }
.bm-atl-tag span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-soft); }
.bm-atl-stamp {
  position: absolute;
  bottom: 12px;
  right: 14px;
  padding: 4px 8px;
  border: 2.5px solid #4f8a5b;
  border-radius: 7px;
  color: #4f8a5b;
  font: 800 12px/1.2 var(--font);
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transform: rotate(-9deg);
  animation: bm-stamp-in 0.4s cubic-bezier(0.2, 1.6, 0.4, 1) 0.15s both;
}
@keyframes bm-stamp-in { from { opacity: 0; transform: scale(2.2) rotate(-9deg); } to { opacity: 0.95; transform: scale(1) rotate(-9deg); } }
.bm-atl-acts { display: grid; gap: 8px; margin-top: 4px; }
.bm-atl-acts .bm-enter svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

/* centre de livraison : le colis avance sur le tapis */
.bm-liv-belt { position: relative; margin: 10px 0 4px; padding-top: 26px; }
.bm-liv-track {
  position: absolute;
  top: 42px;
  left: calc(50% / var(--n));
  right: calc(50% / var(--n));
  height: 5px;
  border-radius: 5px;
  background: repeating-linear-gradient(90deg, #e7dacb 0 6px, #f1e8dc 6px 12px);
  overflow: hidden;
}
.bm-liv-fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--i) / (var(--n) - 1) * 100%); background: linear-gradient(90deg, #4f8a5b, #e0722f); transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1); }
.bm-liv-parcel {
  position: absolute;
  top: 0;
  left: calc((var(--i) + 0.5) / var(--n) * 100%);
  width: 28px;
  height: 21px;
  margin-left: -14px;
  border-radius: 3px;
  background: linear-gradient(180deg, #d9a56b 0%, #c08950 100%);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.12), 0 4px 6px -3px rgba(60, 30, 10, 0.5);
  transition: left 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  animation: bm-liv-bob 0.7s ease-in-out infinite alternate;
}
.bm-liv-parcel::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 5px; margin-left: -2.5px; background: rgba(255, 244, 220, 0.75); }
.bm-liv-parcel::after { content: ''; position: absolute; left: 4px; right: 4px; bottom: 4px; height: 3px; border-radius: 2px; background: rgba(90, 50, 20, 0.35); }
@keyframes bm-liv-bob { from { transform: translateY(0); } to { transform: translateY(-2px); } }
.bm-liv-stops { list-style: none; display: flex; margin: 0; padding: 0; }
.bm-liv-stop { flex: 1; min-width: 0; }
.bm-liv-stop button { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; font-family: var(--font); }
.bm-liv-stop button:focus-visible { outline: 3px solid #f2c14e; outline-offset: 2px; border-radius: 10px; }
.bm-liv-card { margin-top: 12px; padding: 2px 14px 14px; border-radius: 18px; background: #fffaf4; border: 1px solid rgba(18, 18, 28, 0.07); }
.bm-liv-card > .bm-liv-tog:first-child { padding-top: 12px; }
.bm-liv-card > .bm-chips:first-child { margin-top: 14px; }
.bm-liv-choices { display: grid; gap: 10px; margin-top: 12px; }
.bm-liv-choice {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px 14px 14px;
  border: 1.5px solid #ece3d8;
  border-radius: 16px;
  background: #fff;
  text-align: left;
  font-family: var(--font);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.bm-liv-choice:hover { border-color: #d9c7ad; }
.bm-liv-choice.is-on { border-color: var(--bm-terra); background: #fff6f0; }
.bm-liv-choice.is-locked { cursor: default; opacity: 0.72; }
.bm-liv-choice:focus-visible { outline: 3px solid #f2c14e; outline-offset: 2px; }
.bm-liv-ic { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 4px; border-radius: 12px; background: #f3ece2; }
.bm-liv-ic svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bm-liv-choice.is-on .bm-liv-ic { background: #fde3d4; }
.bm-liv-choice.is-on .bm-liv-ic svg { stroke: var(--bm-terra); }
.bm-liv-choice strong { font-size: 15px; color: var(--ink); padding-right: 30px; }
.bm-liv-ct { font-size: 12.5px; line-height: 1.4; color: var(--ink-soft); }
.bm-liv-ok { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--bm-terra); }
.bm-liv-ok svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.bm-liv-badge { position: absolute; top: 12px; right: 12px; padding: 3px 8px; border-radius: 100px; background: #2f4b3f; color: #fff; font: 700 11px/1.3 var(--font); font-style: normal; }
.bm-liv-inline { display: inline; width: auto; margin: 0; padding: 0; font-size: inherit; }
.bm-liv-seg { display: flex; gap: 4px; margin-top: 12px; padding: 4px; border-radius: 100px; background: #f4ebdf; }
.bm-liv-seg button { flex: 1; padding: 10px; border: 0; border-radius: 100px; background: transparent; color: var(--ink-3); font: 700 13.5px/1 var(--font); cursor: pointer; }
.bm-liv-seg button.is-on { background: #fff; color: var(--ink); box-shadow: 0 2px 6px -2px rgba(60, 30, 10, 0.25); }
.bm-liv-small { margin: 12px 0 4px; font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); }
.bm-liv-rate { display: grid; grid-template-columns: 1fr 1fr 32px; gap: 8px; align-items: center; margin-top: 8px; }
.bm-liv-rate-h span { font: 700 12px/1.2 var(--font); color: var(--ink-soft); }
.bm-liv-heavy { padding: 11px 14px; border-radius: 12px; background: #f3ece2; font-size: 14px; font-weight: 600; color: var(--ink-3); }
.bm-liv-del { width: 32px; height: 32px; border: 0; border-radius: 50%; background: #f3ece2; color: var(--ink); font: 700 17px/1 var(--font); cursor: pointer; }
.bm-liv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 12px; }
.bm-liv-fixed { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: baseline; padding: 12px 0; border-top: 1px solid #f1e8dc; font-size: 14.5px; }
.bm-liv-fixed:first-child { border-top: 0; }
.bm-liv-fixed span { font-weight: 700; color: var(--ink); }
.bm-liv-fixed em { font-style: normal; font-size: 12.5px; color: var(--ink-soft); }
.bm-liv-in { margin-top: 4px; }
.bm-liv-warn { margin: 12px 0 0; padding: 8px 10px; border-radius: 10px; background: #fff4e0; color: #7a4e12; font-size: 12.5px; line-height: 1.4; }
/* l'étiquette du colis */
.bm-liv-label {
  position: relative;
  margin: 14px 2px 0;
  padding: 14px 16px 16px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: #fffdf7;
  box-shadow: 0 14px 26px -18px rgba(30, 15, 5, 0.6);
  transform: rotate(-0.6deg);
  overflow: hidden;
}
.bm-liv-label-top { padding-bottom: 10px; border-bottom: 2px solid var(--ink); }
.bm-liv-label-top span, .bm-liv-label-k { display: block; font: 800 10.5px/1.3 var(--font); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.bm-liv-label-top strong { display: block; margin-top: 2px; font-size: 17px; color: var(--ink); }
.bm-liv-label-top em { display: block; font-style: normal; font-size: 13px; color: var(--ink-3); }
.bm-liv-label-k { margin: 12px 0 2px; }
.bm-liv-line { display: grid; grid-template-columns: 1fr auto; gap: 0 12px; padding: 8px 0; border-top: 1px dashed #d9c7ad; }
.bm-liv-label-k + .bm-liv-line { border-top: 0; }
.bm-liv-line b { font-size: 14.5px; color: var(--ink); }
.bm-liv-line strong { font-size: 14.5px; color: var(--ink); }
.bm-liv-line small { grid-column: 1 / -1; font-size: 12px; color: var(--ink-soft); }
.bm-liv-free { display: inline-block; margin-top: 8px; padding: 4px 10px; border-radius: 100px; background: #e5f4e4; color: #24452a; font: 700 12.5px/1.3 var(--font); }
.bm-liv-bars { height: 34px; margin-top: 14px; width: 62%; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 7px, transparent 7px 9px, var(--ink) 9px 10px, transparent 10px 13px, var(--ink) 13px 16px, transparent 16px 18px); opacity: 0.85; }
.bm-liv-stamp {
  position: absolute;
  right: 14px;
  bottom: 14px;
  padding: 6px 12px;
  border: 3px solid var(--bm-terra);
  border-radius: 8px;
  color: var(--bm-terra);
  font: 800 14px/1.2 var(--font);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0;
  transform: scale(2.4) rotate(-12deg);
  transition: opacity 0.2s, transform 0.38s cubic-bezier(0.2, 1.6, 0.4, 1);
  pointer-events: none;
}
.bm-liv-label.is-stamped .bm-liv-stamp { opacity: 0.92; transform: scale(1) rotate(-12deg); }
.bm-liv-zones { margin-top: 18px; }
@media (min-width: 700px) {
  .bm-liv-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bm-atl-fiche { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 22px; align-items: start; }
  .bm-atl-prev { flex-direction: column; align-items: stretch; position: sticky; top: 0; }
  .bm-atl-prev img, .bm-atl-prev .bm-atl-noimg { width: 100%; height: auto; aspect-ratio: 1; }
  .bm-atl-prev .bm-bat-link { text-align: center; }
  .bm-atl-form > :first-child { margin-top: 0; }
  .bm-atl-photos { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .bm-atl-acts { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .bm-liv-parcel, .bm-atl-think .bm-atl-ph img { animation: none; }
  .bm-liv-fill, .bm-liv-parcel, .bm-liv-stamp { transition: none; }
  .bm-atl-stamp { animation: none; opacity: 0.95; }
}

/* ---------- Ordinateur : les fenêtres prennent toute la fenêtre (lot 16,
   demande de Roinitox : « sur PC les fenêtres qui s'affichent je veux
   qu'elles prennent toute la largeur de l'écran ») ---------- */
@media (min-width: 900px) and (min-height: 560px) {
  .bm-sheet-backdrop { padding: 18px; align-items: stretch; }
  .bm-sheet-backdrop > .bm-sheet {
    max-width: none;
    width: 100%;
    height: 100%;
    max-height: none;
    padding: 34px 44px 30px;
    border-radius: 26px;
  }
  .bm-sheet-backdrop > .bm-sheet > .bm-card-close { top: 16px; right: 16px; width: 40px; height: 40px; }
  .bm-sheet h2 { font-size: 24px; }

  /* les bâtiments : le personnage à gauche, son guichet à droite */
  .bm-sheet-backdrop > .bm-bat {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: 44px;
    overflow: hidden;
    padding: 30px 30px 26px 40px;
  }
  .bm-bat-head { grid-column: 1; grid-row: 1; flex-direction: column; text-align: center; padding: 18px 0 0; gap: 14px; }
  .bm-bat-npc { width: 150px; height: 150px; box-shadow: inset 0 0 0 5px var(--bat), 0 16px 30px -16px rgba(30, 15, 5, 0.6); }
  .bm-bat h2 { text-align: center; font-size: 26px; }
  .bm-bat-kicker { font-size: 13px; }
  .bm-bat-bubble { grid-column: 1; grid-row: 2; align-self: start; margin-top: 18px; }
  .bm-bat-bubble p { font-size: 15.5px; }
  .bm-bat-body { grid-column: 2; grid-row: 1 / span 2; min-height: 0; overflow-y: auto; margin: 0; padding: 30px 46px 10px 4px; }
  .bm-bat-tabs { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
  .bm-bat-tab { padding: 14px 42px 14px 16px; }
  .bm-bat-body > .bm-enter, .bm-bat-form, .bm-bat-body > .bm-bat-p, .bm-bat-sep { max-width: 560px; }
  .bm-bank-vault { padding: 22px 26px; }
  .bm-bank-row strong { font-size: 30px; }
  .bm-atl-photos { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
  .bm-atl-fiche { grid-template-columns: 300px minmax(0, 1fr); gap: 32px; }
  .bm-atl-go { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 4px 18px; }
  .bm-atl-go .bm-enter { width: auto; padding: 13px 26px; }
  .bm-atl-go .bm-atl-quota { order: 3; flex-basis: 100%; margin-top: 2px; }
  .bm-atl-go .bm-bat-link { width: auto; margin: 14px 0 0; }
  .bm-liv-card, .bm-liv-label, .bm-liv-seg { max-width: 720px; }
  .bm-liv-label { margin-left: 0; }
  .bm-liv-nav { max-width: 720px; }
  .bm-liv-choice { padding: 18px; }

  /* Mon perso : le perso en grand à gauche */
  #bm-perso-body { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 44px; height: 100%; min-height: 0; }
  .bm-sheet-backdrop > .bm-sheet:has(#bm-perso-body) { overflow: hidden; }
  .bm-perso-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 22px 26px;
    border-radius: 22px;
    background: radial-gradient(120% 90% at 50% 30%, #fff7ec 0%, #f6e4cc 100%);
  }
  .bm-perso-side .bm-perso-preview { width: 180px; height: 270px; margin-top: 36px; }
  .bm-perso-side h2 { margin-top: 16px; font-size: 26px; }
  .bm-perso-side .bm-pts-head { width: 100%; max-width: 280px; }
  .bm-perso-main { min-height: 0; overflow-y: auto; padding: 8px 52px 10px 2px; }
  .bm-perso-main .bm-tabs { max-width: 520px; margin-top: 2px; }
  .bm-perso-main .bm-rewards { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

  /* quiz : au centre */
  .bm-sheet-backdrop > .bm-quiz { display: flex; flex-direction: column; }
  #bm-quiz-body { width: 100%; max-width: 760px; margin: auto; }
  .bm-quiz h2 { font-size: 26px; }
  .bm-quiz-answers { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
  .bm-quiz-a { padding: 16px 18px; font-size: 15.5px; }

  /* sac : une colonne par boutique */
  .bm-bag h2 { text-align: left; margin-top: 2px; }
  #bm-bag-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px; align-items: start; }
  #bm-bag-body > :not(.bm-bag-shop) { grid-column: 1 / -1; margin-left: 0; margin-right: 0; text-align: left; }
  #bm-bag-body > .bm-enter { justify-self: start; width: auto; padding: 13px 26px; }
  #bm-bag-body > .bm-bag-shop { margin-top: 0; }

  /* infos : un encadré par sujet, sur deux colonnes */
  .bm-sheet-backdrop > .bm-info { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; align-content: start; }
  .bm-info > h2, .bm-info > .bm-enter, .bm-info > .bm-info-links { grid-column: 1 / -1; }
  .bm-info > h2 { margin-bottom: 4px; }
  .bm-info p { margin: 0; padding: 16px 18px; border-radius: 16px; background: #fffaf4; border: 1px solid rgba(18, 18, 28, 0.07); font-size: 14.5px; }
  .bm-info > .bm-enter { justify-self: start; width: auto; padding: 13px 26px; margin-top: 4px; }

  /* panneaux « Le savais-tu ? » : titre à gauche, texte à droite */
  .bm-sheet-backdrop > .bm-learn {
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    grid-auto-rows: min-content;
    column-gap: 56px;
    align-content: start;
  }
  .bm-learn > * { grid-column: 1; }
  .bm-learn > .bm-learn-body { grid-column: 2; grid-row: 1 / span 8; max-width: 72ch; padding-right: 40px; }
  .bm-learn-head canvas { width: 96px; height: 96px; }
  .bm-learn h2 { font-size: 28px; line-height: 1.2; }
  .bm-learn-body p { font-size: 17px; line-height: 1.65; }
  .bm-learn-body p:first-child { margin-top: 6px; }
}

/* ============================================================
   Le guide (lot 17, demande de Roinitox : « qu'un utilisateur qui arrive
   ne soit pas perdu… qu'il soit guidé, un peu comme Pokémon »)
   La boîte de dialogue des personnages, l'objectif du moment en haut à
   gauche, les panneaux « Entrer » au-dessus des portes, les étapes.
   ============================================================ */
/* l'objectif : flèche vers où marcher, distance ; toucher = les étapes */
.bm-goal {
  position: fixed;
  top: calc(66px + var(--bm-safe-top));
  left: 16px;
  z-index: 190;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(340px, calc(100vw - 32px));
  box-sizing: border-box;
  padding: 6px 12px 6px 6px;
  border: 0;
  border-radius: 20px;
  background: rgba(255, 250, 244, 0.96);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 14px 30px -14px rgba(60, 30, 10, 0.55);
  color: var(--bm-ink);
  text-align: left;
  cursor: pointer;
  animation: bm-rise 0.25s ease-out;
  -webkit-tap-highlight-color: transparent;
}
.bm-goal[hidden], body:not(.is-playing) .bm-goal { display: none; }
.bm-goal:active { transform: scale(0.98); }
.bm-goal:focus-visible { outline: 3px solid #f2c14e; outline-offset: 2px; }
.bm-goal-arrow {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(145deg, #ffdc7a 0%, #f2b52e 100%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55), 0 4px 10px -4px rgba(160, 100, 0, 0.6);
}
.bm-goal-arrow svg { grid-area: 1 / 1; width: 22px; height: 22px; fill: #4a2f0a; }
.bm-goal-dir { transition: transform 0.12s linear; }
.bm-goal-star { display: none; }
.bm-goal.is-still .bm-goal-dir { display: none; }
.bm-goal.is-still .bm-goal-star { display: block; }
.bm-goal-txt { min-width: 0; display: grid; gap: 1px; }
.bm-goal-txt em {
  font: 800 10.5px/1.2 var(--font);
  font-style: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #a8650f;
}
.bm-goal-txt strong { font: 800 14.5px/1.25 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bm-goal-d {
  flex: none;
  padding: 4px 9px;
  border-radius: 100px;
  background: #f6ead8;
  color: #7a4b1c;
  font: 800 12px/1.2 var(--font);
  white-space: nowrap;
}
.bm-goal-d:empty { display: none; }
/* sous l'objectif : le nom du quartier, les consignes, les points gagnés */
body.has-goal .bm-zone,
body.has-goal .bm-coach,
body.has-goal .bm-gain { top: calc(122px + var(--bm-safe-top)); }
/* téléphone : le nom du quartier sous les points gagnés (pleine largeur) */
@media (max-width: 699px) { body.has-goal .bm-zone { top: calc(172px + var(--bm-safe-top)); } }

/* « Entrer » au-dessus des portes de la rue des vendeurs */
.bm-doors { position: fixed; inset: 0; z-index: 140; pointer-events: none; overflow: hidden; }
.bm-door {
  position: absolute;
  left: 0;
  top: 0;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 13px 5px 5px;
  border: 0;
  border-radius: 100px;
  background: rgba(255, 250, 244, 0.97);
  box-shadow: 0 10px 22px -10px rgba(40, 20, 8, 0.6);
  color: var(--bm-ink);
  text-align: left;
  transform-origin: 50% 100%;
  pointer-events: auto;
  cursor: pointer;
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
}
.bm-door[hidden] { display: none; }
.bm-door::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -5px;
  z-index: -1;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 2px;
  background: inherit;
  transform: rotate(45deg);
}
.bm-door-ic { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--bat, #c8502c); }
.bm-door-ic svg { width: 17px; height: 17px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bm-door-t { display: grid; }
.bm-door-t em { font: 800 10px/1.15 var(--font); font-style: normal; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bat, #c8502c); }
.bm-door-t strong { font: 800 13.5px/1.2 var(--font); white-space: nowrap; }
.bm-door.is-goal { background: #ffd66e; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.92), 0 12px 26px -8px rgba(150, 90, 0, 0.7); animation: bm-door-bob 1.5s ease-in-out infinite; }
.bm-door.is-goal .bm-door-t em { color: #6b4106; }
@keyframes bm-door-bob { 50% { translate: 0 -6px; } }
@media (prefers-reduced-motion: reduce) { .bm-door.is-goal { animation: none; } }

/* la boîte de dialogue des personnages, en bas */
.bm-dlg {
  --dlg: #c8502c;
  position: fixed;
  left: 50%;
  bottom: calc(16px + var(--bm-safe-bottom));
  z-index: 260;
  transform: translateX(-50%);
  width: min(660px, calc(100vw - 20px));
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px 14px 14px;
  border-radius: 24px;
  background: #fffaf4;
  border: 1px solid rgba(18, 18, 28, 0.07);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 24px 48px -16px rgba(60, 30, 10, 0.6);
  cursor: pointer;
  animation: bm-dlg-in 0.25s ease-out;
}
.bm-dlg[hidden] { display: none; }
@keyframes bm-dlg-in { from { opacity: 0; transform: translate(-50%, 14px); } }
.bm-dlg-pic {
  flex: none;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 35%, #fff7ec 0%, #f3e3cc 100%);
  box-shadow: inset 0 0 0 3px var(--dlg), 0 6px 14px -8px rgba(30, 15, 5, 0.5);
}
.bm-dlg-pic[hidden] { display: none; }
.bm-dlg-pic canvas { width: 100%; height: 100%; display: block; }
.bm-dlg-main { flex: 1; min-width: 0; }
.bm-dlg-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bm-dlg-who { font: 800 13px/1.2 var(--font); letter-spacing: 0.05em; text-transform: uppercase; color: var(--dlg); }
.bm-dlg-x { display: grid; place-items: center; width: 34px; height: 34px; margin: -7px -8px -4px 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.bm-dlg-x:hover { background: rgba(58, 42, 32, 0.07); }
.bm-dlg-x svg { width: 18px; height: 18px; fill: none; stroke: var(--ink-3); stroke-width: 2.2; stroke-linecap: round; }
.bm-dlg-text { margin: 5px 0 0; min-height: 2.9em; font: 600 16px/1.45 var(--font); color: var(--bm-ink); }
.bm-dlg-act { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.bm-dlg-next {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 42px;
  padding: 9px 14px 9px 20px;
  border: 0;
  border-radius: 100px;
  background: linear-gradient(135deg, #e0722f 0%, #c94d1d 42%, #a63c11 100%);
  color: #fff;
  font: 800 15px/1 var(--font);
  cursor: pointer;
  box-shadow: 0 10px 20px -12px rgba(120, 40, 10, 0.7);
}
.bm-dlg-next svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.bm-dlg-next:focus-visible, .bm-dlg-choice:focus-visible { outline: 3px solid #f2c14e; outline-offset: 2px; }
.bm-dlg-choice {
  flex: 1 1 100%;
  display: grid;
  gap: 2px;
  padding: 11px 16px;
  border: 1.5px solid rgba(200, 80, 44, 0.32);
  border-radius: 16px;
  background: #fff;
  color: var(--bm-ink);
  text-align: left;
  cursor: pointer;
}
.bm-dlg-choice:hover { border-color: var(--bm-terra); }
.bm-dlg-choice strong { font: 800 15px/1.25 var(--font); }
.bm-dlg-choice span { font: 500 13px/1.35 var(--font); color: var(--ink-3); }
.bm-dlg-choice.is-primary { border-color: transparent; background: linear-gradient(135deg, #e0722f 0%, #c94d1d 42%, #a63c11 100%); color: #fff; box-shadow: 0 10px 20px -12px rgba(120, 40, 10, 0.7); }
.bm-dlg-choice.is-primary span { color: rgba(255, 255, 255, 0.9); }
@media (min-width: 700px) { .bm-dlg-choice { flex: 1 1 0; } }
@media (max-width: 520px) {
  .bm-dlg { gap: 11px; padding: 12px 12px 12px 11px; border-radius: 20px; }
  .bm-dlg-pic { width: 56px; height: 56px; }
  .bm-dlg-text { font-size: 15px; }
  .bm-dlg-choice { padding: 10px 14px; }
}
body.has-dlg .bm-joy, body.has-dlg .bm-prompt, body.has-dlg .bm-hint, body.has-dlg .bm-talk { display: none; }

/* « Comment ça marche ? » sous ce que dit l'accueillant */
.bm-bat-how {
  display: inline-block;
  margin-top: 8px;
  padding: 5px 12px;
  border: 1px solid var(--bat);
  border-radius: 100px;
  background: #fff;
  color: var(--bat);
  font: 700 12.5px/1.2 var(--font);
  cursor: pointer;
}
.bm-bat-how:hover, .bm-bat-how:focus-visible { background: var(--bat); color: #fff; outline: none; }

/* les étapes de la quête */
.bm-quest { --bat: #c8502c; max-width: 460px; padding-top: 20px; }
.bm-quest-head { display: flex; align-items: center; gap: 12px; padding-right: 40px; }
.bm-quest h2 { margin: 2px 0 0; text-align: left; font-size: 21px; }
.bm-qs-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.bm-qs {
  --bat: #c8502c;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #f0e3d0;
}
.bm-qs.is-cur { border-color: #f2b52e; background: #fff8e6; box-shadow: 0 0 0 3px rgba(242, 181, 46, 0.22); }
.bm-qs-n { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #f3ece2; color: var(--ink-3); font: 800 13px/1 var(--font); }
.bm-qs.is-cur .bm-qs-n { background: #f2b52e; color: #3d2608; }
.bm-qs.is-done .bm-qs-n { background: #4f8a5b; }
.bm-qs-n svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.bm-qs-ic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--bat); }
.bm-qs-ic svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.bm-qs.is-done .bm-qs-ic { opacity: 0.55; }
.bm-qs-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.bm-qs-t strong { font: 700 14.5px/1.3 var(--font); }
.bm-qs-t em { font: 500 12.5px/1.35 var(--font); font-style: normal; color: var(--ink-3); }
.bm-qs.is-done .bm-qs-t strong { color: var(--ink-soft); }
.bm-qs-ok { flex: none; font: 700 12px/1.2 var(--font); color: #4f8a5b; }
.bm-qs-go { flex: none; padding: 7px 13px; border: 0; border-radius: 100px; background: #f3ece2; color: var(--bm-ink); font: 700 13px/1.2 var(--font); cursor: pointer; white-space: nowrap; }
.bm-qs.is-cur .bm-qs-go { background: var(--bm-terra); color: #fff; }
.bm-qs-foot { display: flex; gap: 6px; margin-top: 6px; }
.bm-qs-foot .bm-bat-link { width: auto; flex: 1; }
.bm-qs-roles { display: grid; gap: 10px; margin-top: 14px; }

@media (min-width: 900px) and (min-height: 560px) {
  .bm-sheet-backdrop > .bm-quest {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: 44px;
    overflow: hidden;
    padding: 30px 30px 26px 40px;
  }
  .bm-quest-head { grid-column: 1; grid-row: 1; flex-direction: column; text-align: center; padding: 18px 0 0; gap: 14px; }
  .bm-quest-head .bm-bat-npc { width: 150px; height: 150px; box-shadow: inset 0 0 0 5px var(--bat), 0 16px 30px -16px rgba(30, 15, 5, 0.6); }
  .bm-quest h2 { text-align: center; font-size: 26px; }
  .bm-quest > .bm-bat-bubble { grid-column: 1; grid-row: 2; align-self: start; margin-top: 18px; }
  .bm-quest > .bm-bat-bubble p { font-size: 15.5px; }
  .bm-quest-body { grid-column: 2; grid-row: 1 / span 2; min-height: 0; overflow-y: auto; padding: 30px 46px 10px 4px; }
  .bm-quest-body > * { max-width: 760px; }
  .bm-qs-list { gap: 12px; margin-top: 0; }
  .bm-qs { padding: 16px 18px; gap: 14px; }
  .bm-qs-ic { width: 46px; height: 46px; border-radius: 14px; }
  .bm-qs-ic svg { width: 24px; height: 24px; }
  .bm-qs-t strong { font-size: 16.5px; }
  .bm-qs-t em { font-size: 13.5px; }
  .bm-qs-go { padding: 10px 18px; font-size: 14px; }
  .bm-qs-foot { max-width: 480px; }
  .bm-qs-roles { grid-template-columns: 1fr 1fr; margin-top: 0; }
}