/* ===============================
   TITRE
================================ */
.titrereq{
  text-align:center;
  font-size:18px;
  color: #d3cdcd;
  margin:12px 0;
}

/* ===============================
   CONTENEUR CARTE
================================ */
.mapContainer{
  display:flex;
  justify-content:center;
}

#mapWrap{
  position:relative;
  display:inline-block;
  overflow:visible; /* IMPORTANT : pour que le tooltip ne soit pas coupé */
}

#mapImg{
  display:block;
  max-width:100%;
  height:auto;
}

/* ===============================
   MARKER (DESKTOP PAR DÉFAUT)
   loc.png doit être dans le même dossier que ce CSS
================================ */
.marker{
  position:absolute;
  width:50px;
  height:50px;

  background:url("loc.png") no-repeat center center;
  background-size:contain;

  transform:translate(-50%,-100%);
  transition:transform .08s ease; /* ✅ (pas 8s) */

  cursor:pointer;
  z-index:50;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Hover desktop : zoom */
@media (hover: hover) and (pointer: fine){
  .marker:hover{
    transform:translate(-50%,-100%) scale(1.8);
  }
}

/* ===============================
   TOOLTIP (CLICABLE)
   placé juste après le marker => .marker + .tip
   (dans ton JS, tip est un <a class="tip" href="...">)
================================ */
.tip{
  position:absolute;
  transform:translate(-50%,-140%);
  background:rgba(0,0,0,.78);
  color:#fff;
  padding:6px 8px;
  border-radius:6px;

  font-size:12px;
  white-space:nowrap;
  text-align:center;

  display:none;               /* caché par défaut */
  pointer-events:auto;        /* ✅ CLICABLE */
  z-index:60;

  text-decoration:none;       /* ✅ pas de soulignement (si <a>) */
  box-shadow:0 2px 10px rgba(0,0,0,.35);
}

/* Desktop : affichage au hover */
@media (hover: hover) and (pointer: fine){
  .marker:hover + .tip{
    display:block;
  }
}

/* ✅ Mobile/tablette : affichage via JS en ajoutant .active */
.marker.active + .tip{
  display:block !important;
}

/* Contenu tooltip */
.tip-title{
  font-weight:bold;
  font-size:12px;
  line-height:1.1;
}

.tip-click{
  margin-top:4px;
  font-size:11px;
  opacity:.85;
}

/* Effet au survol du tooltip (PC) */
@media (hover: hover) and (pointer: fine){
  .tip:hover{
    opacity:0.95;
  }
}

/* ===============================
   TACTILE (mobile + tablette)
   - désactive hover collant
   - zoom léger quand actif
================================ */
@media (hover: none) and (pointer: coarse){
  .marker:hover{
    transform:translate(-50%,-100%); /* pas de zoom hover sur tactile */
  }
  .marker.active{
    transform:translate(-50%,-100%) scale(1.25);
  }
}

/* ===============================
   RESPONSIVE : tailles marker
================================ */
@media (max-width:768px){
  .marker{
    width:28px;
    height:28px;
  }
  .tip{
    font-size:11px;
    padding:5px 7px;
  }
  .tip-title{ font-size:11px; }
  .tip-click{ font-size:10px; }
}

@media (max-width:480px){
  .marker{
    width:22px;
    height:22px;
  }
  .tip{
    font-size:10px;
    padding:4px 6px;
  }
}