/* ═══════════════════════════════════════════════════════════════════════════
   MaGin Map — « planche manga »
   · fond de carte : tuiles OpenStreetMap assombries (filtre dans index.html)
     + trame de points jaune ; en Manga Mode : N&B et trame noire ;
   · marqueurs : bulles de BD « ! », le point choisi déploie son nom ;
   · fiche du lieu : case sombre aux angles droits, bouton « poster » du site.
   Construit par initLeafletMap / buildPdvMarkers (index.html).
═══════════════════════════════════════════════════════════════════════════ */

/* ── Fond de carte : tuiles OpenStreetMap, filtre d'origine du site ─────── */
/* trame de points (couche de tuiles transparentes posée sur le fond) */
.mgm-dots{background-image:radial-gradient(circle,rgba(240,230,20,.22) 1.1px,transparent 1.4px);background-size:9px 9px}
body.mm .mgm-dots{background-image:radial-gradient(circle,rgba(0,0,0,.18) 1.1px,transparent 1.4px)}
#leaflet-map .mgm-dots{filter:none!important}  /* pas le filtre des tuiles */

/* ── Cadre de la carte : case de manga ──────────────────────────────────── */
.map-panel{border:1px solid rgba(240,230,20,.15)}
body.mm .map-panel{border-color:rgba(0,0,0,.15)}

/* ── Marqueurs : bulles de BD « ! » ─────────────────────────────────────── */
.mgm-pin{position:relative;width:46px;height:46px;cursor:pointer;transform-origin:20% 100%;
  animation:mgmPop .55s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(var(--n,0) * 45ms)}
@keyframes mgmPop{from{transform:scale(0) rotate(-12deg);opacity:0}to{transform:none;opacity:1}}
.mgm-bub{position:absolute;left:0;bottom:12px;display:flex;align-items:center;gap:.45rem;height:38px;min-width:38px;padding:0 10px;
  background:#fff;border:3px solid #080808;border-radius:0;box-shadow:3px 3px 0 #080808;white-space:nowrap;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s}
.mgm-bub::after{content:'';position:absolute;left:8px;bottom:-11px;width:12px;height:12px;background:#fff;
  border-right:3px solid #080808;border-bottom:3px solid #080808;transform:skewX(-30deg) rotate(45deg)}
.mgm-ex{font-family:var(--H);font-weight:900;font-size:1.65rem;line-height:1;color:#F0E614;-webkit-text-stroke:2px #080808;paint-order:stroke fill;margin:0 auto}
.mgm-name{display:none;font-family:var(--H);font-weight:900;font-size:1rem;letter-spacing:.02em;color:#080808;text-transform:uppercase}
/* traits d'émotion (emanata) autour de la bulle */
.mgm-pin::before{content:'';position:absolute;left:30px;top:-10px;width:18px;height:18px;opacity:0;transition:opacity .25s;
  background:linear-gradient(60deg,transparent 45%,#F0E614 45% 58%,transparent 58%) 0 0/8px 18px no-repeat,
             linear-gradient(90deg,transparent 40%,#F0E614 40% 60%,transparent 60%) 8px -2px/6px 18px no-repeat,
             linear-gradient(120deg,transparent 45%,#F0E614 45% 58%,transparent 58%) 13px 2px/8px 18px no-repeat}
.mgm-pin:hover .mgm-bub{transform:translateY(-3px) rotate(-4deg) scale(1.12)}
.mgm-pin:hover::before,.mgm-pin.active::before{opacity:1}
.mgm-pin.active{z-index:1000}
.mgm-pin.active .mgm-bub{background:#F0E614;transform:translateY(-6px) scale(1.12);box-shadow:4px 4px 0 #080808}
.mgm-pin.active .mgm-bub::after{background:#F0E614}
.mgm-pin.active .mgm-ex{color:#080808;-webkit-text-stroke:0;margin:0}
.mgm-pin.active .mgm-name{display:block}
body.mm .mgm-ex{color:#111;-webkit-text-stroke:0}
body.mm .mgm-pin.active .mgm-bub,body.mm .mgm-pin.active .mgm-bub::after{background:#fff}
body.mm .mgm-pin.active .mgm-bub{border-width:4px;box-shadow:5px 5px 0 #111}
body.mm .mgm-pin.active .mgm-ex,body.mm .mgm-pin.active .mgm-name{color:#111}
body.mm .mgm-pin::before{filter:grayscale(1) brightness(0)}

/* ── Fiche du lieu : bulle sombre, aux couleurs du site ────────────────── */
#leaflet-map .leaflet-popup-content-wrapper{background:#111!important;color:var(--wh)!important;border:2px solid var(--y)!important;border-radius:0!important;
  box-shadow:0 18px 40px rgba(0,0,0,.6)!important;padding:.5rem .4rem!important;
  background-image:radial-gradient(circle,rgba(240,230,20,.06) 1px,transparent 1.2px)!important;background-size:9px 9px!important}
#leaflet-map .leaflet-popup-tip{background:#111!important;border-right:2px solid var(--y);border-bottom:2px solid var(--y);box-shadow:none!important}
#leaflet-map .leaflet-popup-close-button{color:rgba(240,239,232,.5)!important;font-size:1.3rem!important;top:8px!important;right:10px!important}
#leaflet-map .leaflet-popup-close-button:hover{color:var(--y)!important}
#leaflet-map .mg-popup-city{color:var(--y)!important;opacity:.75;font-size:.6rem!important;font-weight:700;letter-spacing:.32em;text-transform:uppercase}
#leaflet-map .mg-popup-name{font-family:var(--H)!important;font-weight:900;font-size:1.7rem!important;line-height:.95!important;color:var(--wh)!important;text-transform:uppercase}
#leaflet-map .mg-popup-addr{color:rgba(240,239,232,.55)!important}
/* bouton « poster » du site : contour crème + ombre en trame */
#leaflet-map .mg-popup-gmaps{position:relative;isolation:isolate;display:inline-flex;margin:1rem 9px 9px 0;background:transparent!important;color:var(--wh)!important;
  border:3px solid var(--wh)!important;padding:.75rem 1.2rem!important;font-family:var(--B);font-weight:900;letter-spacing:.22em;text-transform:uppercase;font-size:.62rem!important;
  text-decoration:none;transition:transform .22s ease,color .22s,border-color .22s}
#leaflet-map .mg-popup-gmaps::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;transform:translate(9px,9px);
  background-image:radial-gradient(circle,var(--wh) 1.7px,transparent 1.9px);background-size:7px 7px;
  clip-path:polygon(calc(100% - 9px) 0,100% 0,100% 100%,0 100%,0 calc(100% - 9px),calc(100% - 9px) calc(100% - 9px))}
#leaflet-map .mg-popup-gmaps:hover{transform:translate(2px,2px);color:var(--y)!important;border-color:var(--y)!important}
#leaflet-map .leaflet-popup-content{overflow:visible}
/* Manga Mode : comme le site, papier blanc et encre noire */
body.mm #leaflet-map .leaflet-popup-content-wrapper{background-color:#fff!important;border-color:#111!important;
  background-image:radial-gradient(circle,rgba(0,0,0,.06) 1px,transparent 1.2px)!important;box-shadow:0 18px 40px rgba(0,0,0,.18)!important}
body.mm #leaflet-map .leaflet-popup-tip{background:#fff!important;border-color:#111}
body.mm #leaflet-map .mg-popup-city{color:#111!important;opacity:.5}
body.mm #leaflet-map .leaflet-popup-close-button{color:rgba(0,0,0,.45)!important}

/* ── Liste : la ligne choisie se remplit de jaune (comme l'agenda) ──────── */
.map-pdv-item{position:relative;isolation:isolate}
.map-pdv-item::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--y);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.16,1,.3,1)}
.map-pdv-item.active::before{transform:none}
.map-pdv-item.active :is(.map-pdv-city,.map-pdv-name,.map-pdv-addr){color:var(--bk)!important}

/* ── Crédits des tuiles (obligatoires) : discrets, aux couleurs du site ─── */
#leaflet-map .leaflet-control-attribution{display:block;background:rgba(8,8,8,.75)!important;color:rgba(240,239,232,.5);font-size:9px;line-height:1.4;padding:1px 6px}
#leaflet-map .leaflet-control-attribution a{color:rgba(240,239,232,.7)}
body.mm #leaflet-map .leaflet-control-attribution{background:rgba(255,255,255,.8)!important;color:rgba(0,0,0,.55)}
body.mm #leaflet-map .leaflet-control-attribution a{color:#111}

@media (prefers-reduced-motion:reduce){.mgm-pin{animation:none}.mgm-bub{transition:none}}