.zone-info{position:relative;display:inline-block;vertical-align:baseline;margin-left:.25em}
.zone-info__btn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  width:1.35em;height:1.35em;padding:0;border-radius:50%;
  border:1px solid rgba(255,255,255,.35);background:transparent;
  color:inherit;font:inherit;font-size:.78em;line-height:1;
  text-decoration:none;cursor:pointer;opacity:.75;
  transition:opacity .15s,border-color .15s,background .15s;
}
.zone-info__btn:hover{opacity:1;border-color:var(--accent-cyan,#00d4ff);background:rgba(0,212,255,.12)}
.zone-info__btn:focus-visible{outline:2px solid var(--accent-cyan,#00d4ff);outline-offset:2px;opacity:1}
.zone-info__pop{
  position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%);
  width:min(20rem,78vw);z-index:60;
  padding:12px 14px;border-radius:8px;
  background:rgba(12,14,18,.97);border:1px solid rgba(255,255,255,.14);
  box-shadow:0 10px 30px -12px rgba(0,0,0,.8);
  color:#e9eef1;font-size:.8rem;line-height:1.5;font-weight:400;text-align:left;
  opacity:0;visibility:hidden;transition:opacity .16s,visibility .16s;
}
.zone-info__pop::after{
  content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:6px solid transparent;border-top-color:rgba(12,14,18,.97);
}
.zone-info__pop b{color:var(--accent-cyan,#00d4ff);font-weight:600}
.zone-info__pop a{color:var(--accent-cyan,#00d4ff)}
.zone-info__pop .zone-info__villes{display:block;margin:6px 0;color:#b9c4ca}
/* :focus et non :focus-visible : ce dernier ne se déclenche pas au tap,
   l'infobulle serait donc inatteignable au doigt sur mobile, là où le
   survol n'existe pas. L'anneau de focus, lui, reste en :focus-visible. */
.zone-info:hover .zone-info__pop,
.zone-info__btn:focus + .zone-info__pop{opacity:1;visibility:visible}
@media (prefers-reduced-motion:reduce){.zone-info__pop{transition:none}}
/* Sur petit écran, l'infobulle sort du flottant et se déplie sous le texte.
   Un overlay de ~300 px ancré sur un « ? » situé à droite de l'écran
   déborderait ; en position statique, le débordement est impossible. */
/* Sur petit écran, pas d'infobulle du tout : le « ? » est un lien, le tap
   mène donc directement à la liste complète des communes. Une infobulle
   flottante y est de toute façon ingérable : les cartes portent transform
   et backdrop-filter, qui capturent aussi bien position:fixed que absolute,
   et un panneau statique se retrouve écrasé dans un <li> de 112 px. */
@media (max-width:520px){
  .zone-info__pop{display:none}
}
/* La pastille ne fait qu'une quinzaine de pixels : on étend la zone
   tactile à 44 px via un pseudo-élément, sans toucher au visuel.
   PRODUCT.md impose ce minimum sur mobile (WCAG 2.1 AA) ; il vaut aussi
   pour les tablettes et pliables ouverts (pointeur grossier, > 520 px). */
@media (max-width:520px),(pointer:coarse){
  .zone-info__btn::before{
    content:"";position:absolute;top:50%;left:50%;
    transform:translate(-50%,-50%);
    width:44px;height:44px;border-radius:50%;
  }
}