/* carte.css – cartes du site (core/carte.js) : tuiles, points, info-bulle, zoom.
   Chargée par les pages qui affichent une carte (sorties, recherche). */

.carte { position: relative; height: clamp(22rem, 62vh, 38rem); overflow: hidden; touch-action: none; cursor: grab;
         border: 1px solid var(--rule); border-radius: var(--radius); background: #dfe6e9; user-select: none; }
.carte.drag { cursor: grabbing; }
.carte-tuiles img { position: absolute; left: 0; top: 0; width: 256px; height: 256px; max-width: none; }
@media (prefers-color-scheme: dark) { .carte-tuiles { filter: brightness(.82) contrast(1.05) saturate(.85); } }
.carte-points { position: absolute; inset: 0; pointer-events: none; }

.point {
  position: absolute; transform: translate(-50%, -50%); pointer-events: auto; padding: 0;
  border-radius: 50%; border: 2px solid #fff; background: #c8102e; color: #fff;
  font: 700 .65rem/1 var(--sans); display: grid; place-items: center;
  box-shadow: 0 1px 4px rgb(0 0 0 / .45); cursor: pointer;
}
.point:hover, .point:focus-visible { background: #8f0b21; outline: none; box-shadow: 0 0 0 3px rgb(200 16 46 / .35), 0 1px 4px rgb(0 0 0 / .45); }

.carte-bulle { position: absolute; z-index: 3; width: min(20rem, calc(100% - 1rem)); max-height: 70%; overflow-y: auto;
               background: var(--surface); color: var(--ink); border: 1px solid var(--rule); border-top: 3px solid var(--accent);
               border-radius: var(--radius); padding: .75rem .9rem; box-shadow: 0 4px 16px rgb(0 0 0 / .2); font-size: .88rem; cursor: auto; }
.bulle-lieu { font: 600 1rem var(--serif); margin: 0 0 .4rem; }
.carte-bulle ul { list-style: none; margin: 0; padding: 0; }
.carte-bulle li { display: grid; gap: .05rem; padding: .35rem 0; border-top: 1px solid var(--rule); }
.bulle-date { font-size: .8rem; color: var(--muted); }
.bulle-theme { font-weight: 500; }
.bulle-avec { font-size: .8rem; color: var(--muted); }

.carte-zoom { position: absolute; top: .6rem; right: .6rem; z-index: 2; display: grid; gap: 1px; border-radius: var(--radius); overflow: hidden; box-shadow: 0 1px 4px rgb(0 0 0 / .3); }
.carte-zoom button { width: 2.2rem; height: 2.2rem; border: 0; background: var(--surface); color: var(--ink); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.carte-zoom button:hover { background: var(--bg); }
.carte-zoom .carte-reset { font-size: 1rem; }
.carte-credit { position: absolute; right: 0; bottom: 0; z-index: 2; margin: 0; padding: .1rem .4rem; font-size: .7rem;
                background: rgb(255 255 255 / .8); color: #333; border-top-left-radius: var(--radius); }
.carte-credit a { color: #333; }