/* Outil Locator HB9V · hb9v.ch (même langage que le calculateur coaxial). Tout est préfixé .hl. */
.hl{--hl-noir:var(--h9-noir,#0d0d0e);--hl-encre:var(--h9-encre,#1b1b1d);--hl-gris:var(--h9-gris,#6f6f74);--hl-ligne:var(--h9-ligne,#e4e2de);--hl-pierre:var(--h9-pierre,#eeedea);--hl-signal:var(--h9-signal,#ff5b1f);
  --hl-mono:"IBM Plex Mono",ui-monospace,monospace;--hl-titre:var(--h9-titre,system-ui);--hl-texte:var(--h9-texte,system-ui);
  position:relative;left:50%;width:min(1240px,calc(100vw - 32px));transform:translateX(-50%);margin:10px 0 60px;font:400 15.5px/1.55 var(--hl-texte);color:var(--hl-encre)}
.hl *,.hl *::before,.hl *::after{box-sizing:border-box}
.hl :where(h2,p){margin:0}
.hl button{font:inherit;cursor:pointer}

/* ---------- panneau ---------- */
.hl-pan{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);background:var(--hl-noir);color:#f4f2ee}
.hl-gauche{padding:clamp(20px,3vw,34px);display:flex;flex-direction:column;gap:8px;border-right:1px solid #2a2a2e;background:radial-gradient(120% 90% at 0 0,#1d1d21 0,var(--hl-noir) 60%)}
.hl-droite{padding:clamp(20px,3vw,34px);display:flex;flex-direction:column;gap:18px}
.hl-etiq{display:flex;justify-content:space-between;align-items:center;font:500 10.5px/1.3 var(--hl-texte);letter-spacing:.24em;text-transform:uppercase;color:#a9a9ae}
.hl-grand{font:500 clamp(52px,7.4vw,96px)/1 var(--hl-mono);letter-spacing:.02em;color:#fff;margin-top:6px}
.hl-grand i{font-style:normal;color:#6f6f74}
.hl-coord{font:400 13px/1.4 var(--hl-mono);color:#a9a9ae}
.hl-adr{font:400 16px/1.45 var(--hl-texte);color:#f4f2ee;min-height:1.45em;margin-top:6px}
.hl-bouton{align-self:flex-start;margin-top:12px;background:var(--hl-signal);color:var(--hl-noir);border:0;padding:11px 16px;font:600 12px/1 var(--hl-texte)!important;letter-spacing:.16em;text-transform:uppercase;transition:filter .2s}
.hl-bouton:hover{filter:brightness(1.08)}.hl-bouton[disabled]{opacity:.6}
.hl-msg{font-size:13.5px;color:#ffb98f}
.hl-mini{background:none;border:1px solid #3a3a3f;color:#f4f2ee;padding:6px 10px;font:500 10.5px/1 var(--hl-texte)!important;letter-spacing:.16em;text-transform:uppercase;transition:border-color .2s}
.hl-mini:hover{border-color:var(--hl-signal)}
.hl-mini-c{color:var(--hl-encre);border-color:var(--hl-ligne);margin-top:16px}

.hl-ch{display:flex;flex-direction:column;gap:6px;min-width:0;margin:0}
.hl-ch > label,.hl-ch > span:first-child{font:500 10.5px/1.3 var(--hl-texte);letter-spacing:.2em;text-transform:uppercase;color:#a9a9ae}
.hl-in{display:flex;align-items:center;gap:8px;border-bottom:1px solid #3a3a3f;transition:border-color .2s}
.hl-in:focus-within{border-color:var(--hl-signal)}
.hl-in input{flex:1;min-width:0;background:none;border:0;outline:0;color:inherit;font:500 20px/1.2 var(--hl-mono);padding:6px 0;margin:0;box-shadow:none;border-radius:0}
.hl-in input::placeholder{color:#5c5c61}
#hl-adr-in{font:500 17px/1.3 var(--hl-texte)}
.hl-in input.hl-faux{color:#ff8a65}
.hl-res{font-size:13px;color:#ffb98f;min-height:0}
.hl-mode{display:flex;flex-direction:column;gap:8px;margin-top:auto}
.hl-mode > span{font:500 10.5px/1.3 var(--hl-texte);letter-spacing:.2em;text-transform:uppercase;color:#a9a9ae}
.hl-seg{display:flex}
.hl-seg button{flex:1;background:none;border:1px solid #3a3a3f;color:#d9d7d2;padding:10px 8px;font:500 13px/1.2 var(--hl-texte);transition:all .2s}
.hl-seg button + button{border-left:0}
.hl-seg button.hl-on{background:var(--hl-signal);border-color:var(--hl-signal);color:var(--hl-noir)}

/* ---------- carte ---------- */
.hl-carte{height:clamp(360px,56vh,560px);background:var(--hl-pierre);border:1px solid var(--hl-noir);border-top:0;z-index:1}
.hl-carte .leaflet-control-attribution{font-size:10px}
.hl-leg{font-size:13px;color:var(--hl-gris);margin-top:10px!important}
.hl-g-et{font:500 11px/1 var(--hl-mono);color:rgba(27,27,29,.55);white-space:nowrap;transform:translate(-50%,-50%);pointer-events:none;text-shadow:0 0 3px #fff,0 0 3px #fff}
.hl-g2{font-size:15px}
.hl .leaflet-tooltip.hl-tip{background:var(--hl-noir);color:#fff;border:0;border-radius:0;box-shadow:none;font:500 12px/1 var(--hl-mono);padding:5px 7px}
.hl .leaflet-tooltip.hl-tip::before{border-top-color:var(--hl-noir)}
.hl .leaflet-tooltip.hl-tip-dx{background:#fff;color:var(--hl-noir)}
.hl .leaflet-tooltip.hl-tip-dx::before{border-top-color:#fff}

/* ---------- distance et cap ---------- */
.hl-sec{margin-top:clamp(40px,5vw,64px)}
.hl-sec h2{display:flex;align-items:baseline;gap:16px;font:500 clamp(24px,2.8vw,34px)/1.15 var(--hl-titre);margin:0 0 20px;padding-bottom:14px;border-bottom:1px solid var(--hl-noir)}
.hl-sec h2 b{font:500 13px/1 var(--hl-mono);color:var(--hl-signal)}
.hl-calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(20px,4vw,48px);align-items:start}
.hl-sec .hl-ch > span:first-child{color:var(--hl-gris)}
.hl-sec .hl-in{border-color:var(--hl-encre)}
.hl-sec .hl-in input{font-size:26px}
.hl-sec .hl-in input::placeholder{color:#c4c2bd}
.hl-chiffres{display:grid;grid-template-columns:1fr 1fr auto;border-top:1px solid var(--hl-ligne);border-bottom:1px solid var(--hl-ligne)}
.hl-chiffres > div{padding:14px 0;display:flex;flex-direction:column;gap:4px}
.hl-chiffres > div + div{padding-left:18px;border-left:1px solid var(--hl-ligne)}
.hl-chiffres small{font:500 10.5px/1.3 var(--hl-texte);letter-spacing:.2em;text-transform:uppercase;color:var(--hl-gris)}
.hl-chiffres b{font:500 clamp(30px,4vw,44px)/1.05 var(--hl-mono);color:var(--hl-noir)}
.hl-chiffres b i{font:400 15px/1 var(--hl-mono);font-style:normal;color:var(--hl-gris)}
.hl-rose{align-items:center;justify-content:center;padding-right:4px!important}
.hl-rose{width:86px;position:relative}
.hl-rose::before{content:"N";position:absolute;top:8px;left:50%;transform:translateX(-50%);font:500 10px/1 var(--hl-mono);color:var(--hl-gris)}
.hl-rose span{display:block;width:58px;height:58px;border:1px solid var(--hl-ligne);border-radius:50%;position:relative;margin-top:10px;transition:transform .5s cubic-bezier(.2,.7,.1,1)}
.hl-rose span::after{content:"";position:absolute;left:50%;top:4px;width:2px;height:25px;margin-left:-1px;background:var(--hl-signal)}
.hl-rose span::before{content:"";position:absolute;left:50%;top:0;margin-left:-5px;border:5px solid transparent;border-bottom:8px solid var(--hl-signal);border-top:0}
.hl-aide{font-size:13.5px;line-height:1.5;color:var(--hl-gris);margin-top:12px!important}

@media (max-width:860px){
  .hl-pan{grid-template-columns:1fr}
  .hl-gauche{border-right:0;border-bottom:1px solid #2a2a2e}
  .hl-calc{grid-template-columns:1fr}
}
@media (max-width:480px){
  .hl{width:calc(100vw - 20px)}
  .hl-chiffres{grid-template-columns:1fr 1fr}
  .hl-rose{display:none!important}
}
@media (prefers-reduced-motion:reduce){.hl *{transition:none!important}}
/* le thème impose #hb9v-contenu img{max-width:100%!important} : les tuiles Leaflet tomberaient à 0 px */
#hb9v-contenu .hl .leaflet-container img,.hl .leaflet-container img{max-width:none!important;max-height:none!important;height:auto}
#hb9v-contenu .hl .leaflet-container img.leaflet-tile{width:256px;height:256px}