/* Superpositions des scénettes 3D : marqueurs « ! », bulles, statut de scène, carte d'indice. */
.wg-scn { position: relative; overflow: hidden; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.wg-scn-canvas { display: block; width: 100%; height: 100%; outline: none; }
.wg-scn-overlay { position: absolute; inset: 0; pointer-events: none; font-family: Archivo, system-ui, sans-serif; }

.wg-marker {
  --s: var(--wg-ms, 36px);
  pointer-events: auto; position: absolute; left: 0; top: 0; width: var(--s); height: calc(var(--s) * 1.11); margin: calc(var(--s) * -1.2) 0 0 calc(var(--s) * -.5);
  padding: 0; border: 0; background: none; cursor: pointer; filter: drop-shadow(0 3px 0 rgba(35, 27, 20, .35));
}
.wg-marker svg { display: block; width: 100%; height: 100%; transition: transform .18s ease; }
.wg-marker:hover svg, .wg-marker:focus-visible svg { transform: translateY(-4px) scale(1.12); }
.wg-marker:focus-visible { outline: 3px solid #FFF8EC; outline-offset: 3px; border-radius: 10px; }
.wg-marker::before { content: ''; position: absolute; inset: -6px; }
@keyframes wgFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
.wg-m-in { animation: wgFloat 2.4s ease-in-out infinite; }
.wg-clue { --s: calc(var(--wg-ms, 36px) * .88); }

.wg-bubble {
  position: absolute; left: 0; top: 0; max-width: 230px; padding: 8px 12px 9px; border: 3px solid #231B14; border-radius: 16px;
  background: #FFF8EC; color: #231B14; font-weight: 800; font-size: 15px; line-height: 1.25; box-shadow: 4px 4px 0 #231B14;
  opacity: 0; transition: opacity .2s ease; white-space: normal; width: max-content;
}
.wg-bubble.on { opacity: 1; }
.wg-bubble b { display: block; font-size: 11px; letter-spacing: .5px; text-transform: uppercase; color: #A12A21; margin-bottom: 2px; }
.wg-bubble::after {
  content: ''; position: absolute; left: 50%; bottom: -10px; width: 14px; height: 14px; background: #FFF8EC;
  border-right: 3px solid #231B14; border-bottom: 3px solid #231B14; transform: translateX(-50%) rotate(45deg);
}

.wg-hint {
  position: absolute; left: 50%; bottom: 16px; margin: 0; transform: translateX(-50%); padding: 11px 20px; border-radius: 999px;
  border: 1.5px solid rgba(255, 233, 190, .75); background: rgba(35, 27, 20, .62); color: #FFE9BE; font-weight: 800; font-size: 12px;
  letter-spacing: 2px; text-transform: uppercase; white-space: nowrap; transition: opacity .5s ease; backdrop-filter: blur(4px);
}
.wg-hint.off { opacity: 0; }

.wg-status {
  position: absolute; left: 14px; top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: calc(100% - 28px);
  padding: 8px 14px; border-radius: 16px; border: 3px solid #231B14; background: #FFF8EC; color: #231B14; font-weight: 900; font-size: 15px;
  box-shadow: 4px 4px 0 #231B14;
}
.wg-status:empty { display: none; }
.wg-status small { flex-basis: 100%; font-weight: 600; font-size: 13px; color: #4F4236; }
.wg-status .wg-dot { width: 11px; height: 11px; border-radius: 50%; background: currentColor; }
.wg-status.a-venir { color: #17324D; }
.wg-status.bientot { background: #E8A93A; }
.wg-status.bientot small { color: #3B2A12; }
.wg-status.en-cours { background: #C7362B; color: #FFFFFF; }
.wg-status.en-cours small { color: #FFE4DC; }
.wg-status.termine { background: #E5DED2; color: #4F4236; }
@keyframes wgPulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.wg-status.bientot .wg-dot, .wg-status.en-cours .wg-dot { animation: wgPulse 1.1s ease-in-out infinite; }

.wg-card {
  position: absolute; right: 14px; bottom: 14px; max-width: min(320px, calc(100% - 28px)); padding: 12px 14px; border-radius: 16px;
  border: 3px solid #231B14; background: #FFF8EC; color: #231B14; font-size: 14px; line-height: 1.35; box-shadow: 4px 4px 0 #231B14;
  opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease;
}
.wg-card.on { opacity: 1; transform: none; }
.wg-card b { display: block; font-size: 12px; letter-spacing: .5px; text-transform: uppercase; color: #A12A21; margin-bottom: 3px; }

@media (prefers-reduced-motion: reduce) {
  .wg-m-in, .wg-status .wg-dot { animation: none; }
  .wg-bubble, .wg-card, .wg-hint { transition: none; }
}
.wg-reduced .wg-m-in, .wg-reduced .wg-dot { animation: none !important; }
.wg-marker.seen { --s: calc(var(--wg-ms, 36px) * .72); opacity: .92; }
.wg-marker.seen .wg-m-in { animation: none; }

@media (max-width: 560px) {
  .wg-status { left: 10px; top: 10px; padding: 6px 10px; font-size: 13px; border-width: 2px; box-shadow: 3px 3px 0 #231B14; }
  .wg-status small { font-size: 11.5px; }
  .wg-bubble { font-size: 13px; max-width: 190px; padding: 6px 10px 7px; border-width: 2px; box-shadow: 3px 3px 0 #231B14; }
  .wg-card { font-size: 13px; }
  .wg-hint { font-size: 11px; letter-spacing: 1.5px; padding: 9px 14px; }
}
/* une bulle qui valide (code WesternGo scanné) : le crochet vert */
.wg-bubble .wg-ok {
  display: inline-flex; align-items: center; justify-content: center; width: 1.25em; height: 1.25em; margin-right: .3em; border-radius: 50%;
  background: #23A866; color: #FFFFFF; font-size: .95em; line-height: 1; vertical-align: -.15em;
}