/* beaulien.fr — carte interactive des lieux peints (cote du Leon) */

.map-hero{position:relative;z-index:1;padding:128px 0 6px;text-align:center}
.map-hero .eyebrow{font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--ocre);font-weight:500;margin:0 0 14px}
.map-hero h1{font-size:clamp(40px,6vw,66px)}
.map-hero p{max-width:62ch;margin:14px auto 0;font-size:19px;font-weight:300;color:#3c4c54}

.mapwrap{position:relative;z-index:1;max-width:1040px;margin:34px auto 80px;padding:0 20px}
.mapfig{position:relative;width:100%}
.mapfig svg{display:block;width:100%;height:auto;border:1px solid var(--line);
  box-shadow:0 40px 80px -50px rgba(21,48,59,.6);background:#cfe0e6}

/* mer animee */
.sea-wash{animation:seabreath 9s ease-in-out infinite}
@keyframes seabreath{0%,100%{opacity:.5}50%{opacity:.78}}
.coast{fill:none;stroke:#2f6b86;stroke-width:2.4}
.route{stroke:#2f6b86;stroke-width:1.6;stroke-dasharray:2 7;stroke-linecap:round;opacity:.55;fill:none}
.maplabel{font-family:"Cormorant Garamond",serif;fill:#2f6b86;opacity:.7}
.maplabel.sea{fill:#3a6b81;font-style:italic}
.compass{fill:none;stroke:#2f6b86;stroke-width:1.4;opacity:.7}
.compass-n{font-family:"Spectral",serif;fill:#2f6b86;font-size:15px;font-weight:600}

/* points */
.marker{position:absolute;transform:translate(-50%,-50%);z-index:3;border:0;outline:0;cursor:pointer}
.marker .dot{position:relative;width:15px;height:15px;border-radius:50%;background:var(--ocre);
  box-shadow:0 0 0 4px rgba(243,236,224,.9),0 2px 8px rgba(21,48,59,.5);margin:0 auto}
.marker .dot::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1.5px solid var(--ocre);
  opacity:.6;animation:ping 2.6s cubic-bezier(.2,.7,.2,1) infinite}
@keyframes ping{0%{transform:scale(.6);opacity:.7}70%,100%{transform:scale(2.1);opacity:0}}
.marker .lbl{display:block;margin-top:7px;font-family:"Cormorant Garamond",serif;font-size:16px;
  font-weight:600;color:var(--ink);text-align:center;white-space:nowrap;text-shadow:0 1px 0 rgba(243,236,224,.9),0 0 6px rgba(243,236,224,.9)}
.marker:hover .dot,.marker:focus .dot{background:var(--sea-deep)}
.marker:hover .lbl,.marker:focus .lbl{color:var(--sea-deep)}

/* vignette au survol/focus */
.marker .card{position:absolute;left:50%;bottom:calc(100% + 14px);transform:translateX(-50%) translateY(8px);
  width:200px;background:var(--sheet);border:1px solid var(--line);border-radius:3px;overflow:hidden;
  box-shadow:0 26px 50px -28px rgba(21,48,59,.7);opacity:0;visibility:hidden;transition:.28s ease;pointer-events:none;z-index:5}
.marker.down .card{bottom:auto;top:calc(100% + 14px);transform:translateX(-50%) translateY(-8px)}
.marker:hover .card,.marker:focus .card,.marker:focus-within .card{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.marker .card img{width:100%;height:118px;object-fit:cover;display:block;background:#e9e0cf}
.marker .card .cc{padding:11px 13px 13px;text-align:left}
.marker .card .pl{font-family:"Cormorant Garamond",serif;font-size:19px;color:var(--ink);line-height:1.1}
.marker .card .ds{font-size:13px;color:#586269;margin-top:3px;line-height:1.4}
.marker .card .go{display:inline-block;margin-top:8px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ocre);font-weight:600}

.maplegend{max-width:1040px;margin:0 auto 70px;padding:0 20px;text-align:center;color:var(--muted);font-style:italic;font-size:15px}

@media(max-width:640px){
  .marker .lbl{font-size:13px}
  .marker .dot{width:13px;height:13px}
  .marker .card{width:150px}
  .marker .card img{height:92px}
}