#gp-map{
  position:relative;
  width:100%;
  align-items: right;

}
#map-container{position:relative;
  display:flex;
   overflow: hidden;         
   right:-10em; 
   margin-left:auto;}

   #map-container {
    position: relative;
    overflow: hidden;
 
  
    /* masque avec fondu sur la droite */
    -webkit-mask-image: 
    linear-gradient(to right,
      black 0%,
      black calc(100% - 150px),
      transparent 100%
    ),
    linear-gradient(to top,
      black 0%,
      black calc(100% - 50px),
      transparent 100%
    );

  -webkit-mask-composite: intersect;

  mask-image: 
    linear-gradient(to right,
      black 0%,
      black calc(100% - 150px),
      transparent 100%
    ),
    linear-gradient(to top,
      black 0%,
      black calc(100% - 50px),
      transparent 100%
    );

  mask-composite: intersect;

  }
  
 #overlay-map {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
 
    height: 100%;
    display: block;
    align-items: center;      /* centre verticalement */
    justify-content: left;  /* centre horizontalement */
  
    pointer-events: none;     /* optionnel : laisse passer les clics vers la carte */
  }
.stats {
  font-size:1.5em;
  color:rgb(124, 150, 167);
  opacity:0.9;
  font-family: "roboto",arial;
  font-style: italic;
  line-height: 1.5em;
}

  .fade-item {
    opacity: 0;
    transform: translateY(10px);
    animation: fadeInUp 0.8s forwards;
  }
  
  .fade-item:nth-child(1) { animation-delay: 0s; }
  .fade-item:nth-child(2) { animation-delay: 1s; }
  .fade-item:nth-child(3) { animation-delay: 2s; }
  .fade-item:nth-child(4) { animation-delay: 3s; }
  .fade-item:nth-child(5) { animation-delay: 4s; }
  
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

.st0, 
.st1 {
  stroke:  rgba(255, 255, 255, 0.308) !important;    
  stroke-width: 0.5px;  

  fill: 
    rgba(255, 255, 255, 0.055)!important; 

  /* ombre douce */
  filter: drop-shadow(0 0 3px rgba(40, 50, 56, 0.568));
}

circle{
  fill:#e7cc3d
    
}


circle:hover {
  fill: rgba(243, 234, 111, 0.9)!important;
}

circle {
  fill: #e7cc3d;
  filter: drop-shadow(0 0 4px #978423);
  animation: pulse 2s infinite alternate ease-in-out;
}

@keyframes pulse {
  0%   { filter: drop-shadow(0 0 2px #e7cc3d); opacity: 0.8; }
  50%  { filter: drop-shadow(0 0 8px #e7cc3d); opacity: 1; }
  100% { filter: drop-shadow(0 0 2px #e7cc3d); opacity: 0.8; }
}




.tooltip {
  position: fixed!important;
  background-color: rgba(49, 57, 77, 0.932)!important;
  color: rgba(207, 207, 207, 0.904);
  padding: 8px 8px;
  border:1px solid rgba(83, 80, 80, 0.514);
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(71, 57, 10, 0.671);
  font-size: 13px;
  font-family:"roboto",Arial;
  font-weight: 500;
  display: none;
  pointer-events: none;
 z-index:99999;
 transform: translate(10%, -20%);
}

circle {
  cursor: pointer;
}

circle {
  fill: #e7cc3d;

  /* Ombre douce */
  filter: drop-shadow(0 0 6px rgba(231, 204, 61, 0.7));

  /* Animation */
  animation: pulse 1.8s infinite ease-in-out;
  transform-origin: center;
}

circle {
  transition: transform 0.2s ease;
  transform-origin: center;
  transform-box: fill-box; 
}

  circle:hover {
    transform: scale(1.3); /* grossit légèrement autour du centre */
    filter: drop-shadow(0 0 6px #e7cc3d); /* halo un peu plus fort */
  }
  @media (max-width: 768px) {
    #gp-map {
      display: none;
    }
  }