/* ------------------------------------------------------------------
   Facette · Villes bloquées (villes.js, 20/10/2026).
   Une barre de recherche, la liste des villes bloquées. Que des variables
   de styles.css (les deux thèmes suivent seuls) ; l'ambre a sa version
   pour le fond clair.
   ------------------------------------------------------------------ */

#vue-villes{--vb-ambre:#FFB054;--vb-t-ambre:#FFC77D;--vb-rouge:#FF8FA6;--vb-champ:color-mix(in srgb,var(--texte) 6%,transparent)}
html[data-theme="clair"] #vue-villes{--vb-ambre:#EE8A12;--vb-t-ambre:#9A4E00;--vb-rouge:#A81447;--vb-champ:#fff}

#vue-villes .vb-tete{margin-top:8px;max-width:720px}
#vue-villes .vb-titre{font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:-0.01em}
#vue-villes .vb-explique{color:var(--texte-doux);font-size:15px;line-height:1.5;margin-top:6px}
#vue-villes .vb-explique b{color:var(--texte)}

/* ---- la barre de recherche ---- */
#vue-villes .vb-recherche{position:relative;max-width:520px;margin-top:20px}
#vue-villes .vb-recherche svg{position:absolute;left:15px;top:23px;width:18px;height:18px;transform:translateY(-50%);fill:none;stroke:var(--texte-faible);stroke-width:2;stroke-linecap:round;pointer-events:none}
#vue-villes .vb-recherche input{width:100%;height:46px;font:inherit;font-size:16px;color:var(--texte);background:var(--vb-champ);border:1px solid var(--trait-fort);border-radius:12px;padding:0 16px 0 44px;-webkit-appearance:none;appearance:none}
#vue-villes .vb-recherche input::placeholder{color:var(--texte-faible)}
#vue-villes .vb-recherche input::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
#vue-villes .vb-recherche input:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px color-mix(in srgb,var(--violet) 25%,transparent)}

#vue-villes .vb-propositions{position:absolute;z-index:20;left:0;right:0;top:52px;margin:0;padding:6px;list-style:none;background:var(--carte);border:1px solid var(--trait-fort);border-radius:12px;box-shadow:0 18px 40px -18px rgba(0,0,0,.5)}
#vue-villes .vb-propositions[hidden]{display:none}
#vue-villes .vb-propositions li{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:8px;cursor:pointer}
#vue-villes .vb-propositions li.vb-sur,#vue-villes .vb-propositions li:hover{background:color-mix(in srgb,var(--violet) 18%,transparent)}
#vue-villes .vb-p-nom{font-weight:600;color:var(--texte)}
#vue-villes .vb-p-detail{font-size:13px;color:var(--texte-faible);text-align:right}
#vue-villes .vb-deja{opacity:.55}
#vue-villes .vb-deja .vb-p-detail{color:var(--vb-t-ambre)}

#vue-villes .vb-aide{max-width:620px;margin-top:10px;font-size:13px;line-height:1.45;color:var(--texte-faible)}
#vue-villes .vb-message{min-height:1.4em;margin-top:12px;font-size:14px;font-weight:600;color:var(--texte-doux)}
#vue-villes .vb-erreur{color:var(--vb-rouge)}

/* ---- la liste ---- */
#vue-villes .vb-resume{margin-top:18px;font-size:14px;color:var(--texte-doux)}
#vue-villes .vb-vide{max-width:720px;margin-top:18px;padding:22px;text-align:center;border:1px dashed var(--trait-fort);border-radius:14px;color:var(--texte-doux)}
#vue-villes .vb-liste{list-style:none;margin:10px 0 0;padding:0;max-width:720px;display:grid;gap:8px}
#vue-villes .vb-ville{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--trait);border-radius:var(--rayon);background:var(--carte)}
#vue-villes .vb-point{flex:none;width:10px;height:10px;border-radius:99px;background:var(--vb-ambre);box-shadow:0 0 0 4px color-mix(in srgb,var(--vb-ambre) 22%,transparent)}
#vue-villes .vb-qui{flex:1;min-width:0;display:grid;gap:2px}
#vue-villes .vb-qui b{font-family:var(--display);font-size:17px;font-weight:700;color:var(--texte);overflow-wrap:anywhere}
#vue-villes .vb-qui span{font-size:13px;color:var(--texte-faible)}
#vue-villes .vb-debloque{flex:none;font:inherit;font-size:13.5px;font-weight:600;color:var(--texte-doux);background:transparent;border:1px solid var(--trait-fort);border-radius:999px;padding:7px 14px;cursor:pointer}
#vue-villes .vb-debloque:hover{color:var(--texte);border-color:var(--texte-faible)}
#vue-villes .vb-debloque:focus-visible{outline:2px solid var(--violet);outline-offset:2px}

@media (max-width:560px){
  #vue-villes .vb-ville{flex-wrap:wrap}
  #vue-villes .vb-debloque{margin-left:24px}
}