/* ---------------------------------------------------------------
   SD Serrurerie Dépannage — carte MEL + calculateur de trajet
   Utilisé uniquement sur tarifs.html.
--------------------------------------------------------------- */

.mel-map{
  border-radius:8px;
  border:1px solid var(--hair);
  margin:22px 0 10px;
  background:var(--ink);
  overflow:hidden;
  line-height:0;
}
.mel-svg{width:100%; height:auto; display:block;}
.mel-map-caption{
  font-size:0.8rem; color:var(--steel); margin:0 0 30px; opacity:0.8;
}

.km-calc{
  background:var(--paper-2);
  border:1px solid var(--hair);
  border-radius:8px;
  padding:28px 26px;
  margin:0 0 34px;
}
.km-calc h3{margin:0 0 10px; font-size:1.2rem;}
.km-calc > p{margin:0 0 18px; color:var(--steel);}

.km-form{
  display:flex; flex-wrap:wrap; align-items:end; gap:14px;
  margin:0 0 6px;
}
.km-field{
  display:flex; flex-direction:column; gap:6px;
  flex:1 1 200px; min-width:180px;
}
.km-field label{font-size:0.85rem; color:var(--steel); font-weight:600;}
.km-field input{
  padding:11px 14px;
  border:1px solid var(--hair);
  border-radius:5px;
  font-family:'Work Sans', sans-serif;
  font-size:1rem;
  background:#fff;
  color:var(--ink);
}
.km-field input:focus-visible{outline:2px solid var(--brass); outline-offset:1px;}

.km-submit{
  flex:0 0 auto;
  border:none; cursor:pointer;
  font-size:1rem; padding:12px 24px;
}

.km-result{
  margin-top:18px;
  padding:16px 18px;
  background:var(--paper);
  border:1px solid var(--hair);
  border-radius:6px;
  font-size:1rem;
  line-height:1.55;
  min-height:0;
}
.km-result:empty{display:none;}
.km-result .ok{color:var(--ink); font-weight:600;}
.km-result .err{color:#a3341f;}

.km-disclaimer{
  font-size:0.84rem;
  color:var(--steel);
  margin:16px 0 0;
}

@media (max-width:768px){
  .mel-map, .mel-map-caption{display:none;}
}
@media (max-width:600px){
  .km-form{flex-direction:column; align-items:stretch;}
  .km-submit{width:100%;}
}