/* Base container */
.sonar {
  position: fixed;             /* not clipped by slider/hero overflow */
  right: 40px;
  width: 250px;
  height: 250px;
  z-index: 10050;              /* above slider UI */
  pointer-events: none;        /* container itself does not intercept clicks */
}

/* Vertical positions */
.sonar--calendrier { top: 202px; }
.sonar--jobintech  { top: 450px; }

/* Pulse rings */
.sonar__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(0,188,212,.5);
  animation: pulse 2s infinite;
  pointer-events: none;
  z-index: 1;
}
.sonar__ring::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(0,188,212,.3);
  animation: pulse 2s infinite 1s;
  pointer-events: none;
  z-index: 1;
}

@keyframes pulse{
  0%   { transform: scale(.8); opacity: 1; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* Bubble */
.sonar__bubble{
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 230px; height: 230px;
  margin: 0 auto;
  padding: 10px;
  border-radius: 50%;
  background: rgb(0,118,133);
  border: 2px solid rgba(0,188,212,.5);
  color: #fff;
  text-align: center;
  font-size: 18px;
  backdrop-filter: blur(3px);
  z-index: 2;
  pointer-events: auto; /* links inside are clickable */
}

.sonar__bubble a{
  color: #ffeb3b; font-weight: 700; text-decoration: none;
}
.sonar__bubble a:hover{ color: #fff; text-decoration: underline; }

/* Responsive */
@media (max-width:1200px){
  .sonar{ width:200px; height:200px; }
  .sonar__bubble{ width:200px; height:200px; font-size:16px; }
  .sonar--calendrier{ top:120px; }
  .sonar--jobintech { top:360px; }
}
@media (max-width:768px){
  .sonar{ width:180px; height:180px; right:20px; }
  .sonar__bubble{ width:180px; height:180px; font-size:15px; }
  .sonar--calendrier{ top:110px; }
  .sonar--jobintech { top:300px; }
}
@media (max-width:480px){
  .sonar{ width:150px; height:150px; right:10px; }
  .sonar__bubble{ width:150px; height:150px; font-size:14px; }
  .sonar--calendrier{ top:90px; }
  .sonar--jobintech {top:260px;}
}