/* CSS spécifique aux pages /villes/ (chargé uniquement sur ces pages) */
/* Objectifs: pas de CLS, accessibilité ≥96, pas de render-blocking supplémentaire (fichier léger) */

/* Stabilise le HÉRO villes si présent */
.hero.hero--villes {
  min-height: clamp(320px, 58vw, 760px);
}
.hero.hero--villes .hero__media picture,
.hero.hero--villes .hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Grille de boutons de villes sur la page parent /villes/ si utilisée */
.villes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

/* Touch targets */
@media (pointer: coarse) {
  .btn {
    min-height: 44px;
  }
}

/* Footer liens identifiables et AA (inchangé si style global déjà présent) */
.footer a {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer a:hover {
  text-decoration-thickness: 2px;
}

/* Cache le lien d’évitement hors focus (AA) */
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}