.gm-pin{
    width:14px; 
    height:auto;     /* garde le ratio (≈15px de haut) */
    vertical-align:-2px;
    image-rendering:-webkit-optimize-contrast;
  }

.calc-box {
    font-weight: bold;
    background: #fff;
    border: 2px solid var(--couleur-froide-fonce);
    border-radius: 10px;
    padding: 0.4em 0.6em;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-size: 1rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    color: var(--couleur-chaude-fonce);
    margin-bottom : 1em;
}
.calc-icon {
    font-size: 1.3em;
}
#calc-zone {
    display: flex;
    justify-content: center;
    margin: 0;
}

.spinner {
border: 4px solid var(--couleur-froide-clair);
border-top: 4px solid var(--couleur-froide-fonce);
border-radius: 50%;
width: 20px;
height: 20px;
animation: spin 1s linear infinite;
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

#radius-slider {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 14px;
border-radius: 7px;
background: var(--couleur-froide-clair); /* même partout */
outline: none;
}

/* Chrome / Safari / Edge - bouton */
#radius-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 34px;
height: 34px;
background: var(--couleur-froide-fonce);
border-radius: 50%;
border: none;
margin-top: -10px;
cursor: pointer;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
transition: transform 0.2s ease;
}

#radius-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

/* Chrome / Safari - barre (même couleur que fond) */
#radius-slider::-webkit-slider-runnable-track {
height: 8px;
border-radius: 4px;
background: var(--couleur-froide-clair);
}

/* Firefox - zone droite (non sélectionnée) */
#radius-slider::-moz-range-track {
height: 8px;
border-radius: 4px;
background: var(--couleur-froide-clair);
}

/* Firefox - zone gauche (valeur sélectionnée) */
#radius-slider::-moz-range-progress {
height: 8px;
border-radius: 4px;
background: var(--couleur-froide-fonce);
}

/* Firefox - bouton */
#radius-slider::-moz-range-thumb {
width: 34px;
height: 34px;
background: var(--couleur-froide-fonce);
border-radius: 50%;
border: none;
cursor: pointer;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
}

.radius-label-row {
display: flex;
align-items: center;
justify-content: center; /* ← centre l'ensemble */
gap: 0.5em;
margin-bottom: 0.5em;
}

.radius-label {
font-weight: 500;
text-align: right;
}

.radius-value {
color: var(--couleur-chaude-fonce);
font-weight: 800;
}

.info-btn-inline {
position: static !important;
background: transparent;
border: none;
color: var(--couleur-froide-fonce);
padding: 0;
cursor: pointer;
line-height: 1;
vertical-align: middle;
}

.info-btn-inline .info-icon {
font-size: 20px;
display: inline-block;
line-height: 1;
margin-top: 4px; /* ← décale ℹ️ un peu vers le bas */
}

.info-btn-inline:focus {
outline-offset: 2px;
border-radius: 4px;
}

.info-btn-inline:hover {
color: #2f6276;
transform: scale(1.1);
transition: transform 0.15s ease;
}

.info-btn-inline:focus {
outline: none;
box-shadow: none;
}

.radius-slider-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  margin-top: 0;
  width: 100%;
  max-width: 100%;
}

.radius-slider-wrapper input[type="range"] {
  flex-grow: 1;
  margin: 0 0.5em;
}

.radius-limit {
  font-size: 0.9em;
  color: var(--couleur-froide-fonce);
  min-width: 40px;
  text-align: center;
  font-weight: 700;
   width: 45px;
   padding-top: 18px;
}

.radius-slider-container {
  flex-grow: 1;
  display: flex;
}

.radius-slider-container input[type="range"] {
  width: 100%;
}