/* Styles pour le calendrier de l'Avent */

.hotspot-avent {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex!important;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.2em;
  color: white;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0,0,0,0.5);
  /*border: 3px solid white;*/
  transition: opacity 0.5s ease;
  /* scale 0.5s ease;*/
opacity: 0.3;
  border: 5px dotted rgba(255, 255, 255,0.5);
}

.hotspot-avent:hover {
  opacity:1;
  font-size:2em;
}

/* Vert : disponible et ouvert */
.hotspot-avent.opened {
  background: rgba(0, 180, 0, 0.9);
}

/* Rouge : pas encore disponible */
.hotspot-avent.locked {
  background: rgba(200, 0, 0, 0.9);
}

/* Orange : jour actuel */
.hotspot-avent.current {
  background: rgba(255, 140, 0, 0.9);
  animation: glow 1.5s infinite;
  opacity:1;
}

@keyframes glow {
  0%, 100% { 
    box-shadow: 0 0 20px rgba(255, 140, 0, 0.8); 
  }
  50% { 
    box-shadow: 0 0 40px rgba(255, 140, 0, 1); 
  }
}

/* Style pour hotspots avec SVG */
.hotspot-avent svg {
  max-width: 100%;
  max-height: 100%;
}

/* Hotspot spécifique pour SVG personnalisé */
#id1.hotspot-avent {
  width: auto;
  height: auto;
  background: none;
  border: none;
  opacity: 0.5;
}

#id1 svg {
  width: 435.88px;
  height: 497.48px;
  transform: scaleY(2);
}

/* Popup */
#avent-popup {
  font-family: 'Arial', sans-serif;
}

/* Date tester */
.date-tester {
  font-family: 'Arial', sans-serif;
      position: absolute;
      bottom: 0px;
      right: 0px;
      z-index: 10;
      background: rgba(0,0,0,0.8);
      padding: 15px;
      border-radius: 10px;
      color: white;
}

.date-tester input:focus {
  outline: 2px solid #4CAF50;
}

/* Styles responsive */
@media (max-width: 768px) {
  .hotspot-avent {
    width: 50px;
    height: 50px;
    font-size: 1em;
  }
  
  .date-tester {
    padding: 10px;
  }
  
  #avent-popup {
    max-width: 90%;
    padding: 20px;
  }
}