/* Références : carte du monde avec épingles et logos positionnés (--x / --y), grille de logos sur mobile. */

.qr-map { position: relative; }
.qr-bg { display: block; width: 100%; height: auto; }
.qr-geo { position: relative; }
.qr-pins, .qr-logos { position: absolute; inset: 0; }
.qr-pin { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); width: 14px; height: 14px; border-radius: 50%; background: var(--qa-pink); box-shadow: 0 0 0 6px rgba(201,42,98,.22), 0 0 0 14px rgba(201,42,98,.08); }
.qr-pin-l > span { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); white-space: nowrap; font-weight: 700; font-size: 13px; color: var(--qa-ink); background: #ffffff; border-radius: 999px; padding: 4px 10px; box-shadow: 0 6px 18px -8px rgba(35,37,47,.35); }
.qr-logo { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); width: clamp(96px, 14%, 200px); height: clamp(44px, 6.6vw, 92px); display: flex; align-items: center; justify-content: center; }
.qr-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }

@media (max-width: 899px) {
    .qr-geo { position: absolute; inset: 0; overflow: hidden; }
    .qr-bg { position: absolute; top: 0; left: 50%; transform: translateX(-50%); height: 100%; width: auto; max-width: none; }
    .qr-logos { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; padding: 8px 8px 16px; }
    .qr-logo { position: static; transform: none; width: auto; height: 64px; }
    .qr-pin-l > span { display: none; }
}