/* OVERLAY : fade in/out fluide */
#plan-overlay {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.2);
  z-index: 9998;

  /* au repos : invisible mais présent pour permettre l’animation */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition: opacity 0.35s ease, visibility 0.35s ease;
}

#plan-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* MODALE : fade + petit zoom (sans toucher à ton style visuel) */
#plan-modal {
  position: fixed;
  z-index: 10000;
  background-color: #e3e3e4;
  background-image: url(https://www.louis-lequin.com/fichiers/bg-fond-vin-claire.webp);
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: 90%;
  padding: 1rem;
  max-width: 400px;
  width: 90%;
  top: 50%;
  left: 50%;
  border-radius: 7px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);

  /* état initial (caché avec transition possible) */
  transform: translate(-50%, -50%) scale(0.96);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  /* on garde les transitions ici (et non display) */
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease;
}

#plan-modal.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

#plan-modal.active .modal-content {
  animation: modalIn 0.9s ease forwards;
}
@keyframes modalIn {
  0% { opacity: 0;  }
  100% { opacity: 1; }
}

/* Accessibilité */
@media (prefers-reduced-motion: reduce) {
  #plan-overlay, #plan-modal, #plan-modal .modal-content {
    transition: none !important;
    animation: none !important;
  }
}




.modal-close { position: absolute; top: 10px; right: 15px;font-size:22px; width: 25px; height: 25px; line-height: 22px; cursor: pointer; background-color: #30302e; color: #fff;border-radius: 50%;}
.modal-close:hover {background-color: #b9a562}

.modal-title { font-size: 16px; margin-bottom: 20px; text-transform: uppercase}
.modal-image { width: 25%; float: left}
.modal-texte { width: 75%; float: left; font-size: 14px; line-height: 18px; margin-top: 20px; padding-left: 10px;}
.modal-button {position: absolute; right: 10px; bottom: 10px; display: inline-block; margin-top: 1rem; padding: 0.2rem 1.5rem; background: #30302e; color: #fff !important; text-decoration: none; text-transform: uppercase; font-size: 13px; letter-spacing: 1px}
.modal-button:hover { background-color:#b9a562; color: #fff !important }



/* Style initial pour les points */
#PlanSVG [id^="point-"] {
  transition: transform 0.3s ease, filter 0.3s ease;
  transform-origin: center;
}

/* Fond par défaut (juste au cas où) */
#PlanSVG [id^="point-"] rect {
  fill: #239cd3;
  transition: fill 0.3s ease;
}

/* Hover */
#PlanSVG [id^="point-"]:hover { filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.6));}
/*#PlanSVG [id^="point-"]:hover rect {fill: #b9a562;}*/
#PlanSVG [id^="point-"]:hover path {fill: #444;}

/*#PlanSVG .point-actif rect {fill: #b9a562 !important;}*/
#PlanSVG .point-actif path {fill: #444 !important;}
#PlanSVG .point-actif { filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.6));}
/*#PlanSVG [id^="point-"].point-actif rect {fill: #b9a562 !important;}*/
#PlanSVG [id^="point-"].point-actif path {fill: #444 !important;}


/*animation “pulse + halo”*/
/* Animation d’emphase sur le point actif (compatible avec <g>, <path>, <circle>...) */
.svg-container [id^="point-"].point-actif,
.svg-container [id^="point-"].point-actif * {
  transform-box: fill-box;          /* crucial pour SVG */
  transform-origin: 50% 50%;
  animation: pointPulse 1.2s ease-in-out infinite;
  filter: drop-shadow(0 0 0 rgba(255, 165, 0, 0)); /* base, animée via @keyframes */
}

/* Variante halo + zoom doux */
@keyframes pointPulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 0 rgba(255, 165, 0, 0));
  }
  50% {
    transform: scale(1.11);
    filter: drop-shadow(0 0 8px rgba(255, 165, 0, 0.75));
  }
}

/* Optionnel : si vos points sont des <circle>, on pulse aussi le trait comme un halo qui “respire” */
.svg-container [id^="point-"].point-actif circle {
  stroke: #FFA500;
  stroke-width: 2;
  animation: pointHalo 1.6s ease-out infinite;
}

@keyframes pointHalo {
  0%   { stroke-opacity: .9; stroke-width: 2; }
  100% { stroke-opacity: 0;  stroke-width: 14; }
}

/* Accessibilité : respecte la préférence utilisateur */
@media (prefers-reduced-motion: reduce) {
  .svg-container [id^="point-"].point-actif,
  .svg-container [id^="point-"].point-actif * {
    animation: none !important;
    filter: none !important;
  }
}