/*
 * mas-carte.css — [E1667] Habillage du composant carte unique (OpenStreetMap, sans clé d'API).
 *
 * PORTÉE VOLONTAIREMENT ÉTROITE (R86) : ce fichier ne contient QUE des règles portant sur les
 * classes NOUVELLES `mas-carte*`, introduites par ce chantier. Il ne modifie AUCUNE règle
 * existante du site — les conteneurs de mise en page qui entourent la carte (hauteurs, grilles,
 * cartes de contenu) restent ceux du site et ne sont pas touchés.
 *
 * Le bloc remplacé conserve d'ailleurs son ancienne classe de mise en page à côté de la nouvelle
 * (`class="mas-carte mas-city-map-component"`, etc.) : la hauteur et la position de la carte
 * restent EXACTEMENT celles d'aujourd'hui, seul le moteur de rendu change.
 */

.mas-carte {
  position: relative;
  display: block;
  width: 100%;
}

/* Le conteneur de rendu reprend la place exacte qu'occupait l'ancien cadre. */
.mas-carte__canvas {
  width: 100%;
  height: 100%;
  min-height: 320px;
  border: 0;
  border-radius: inherit;
  background: #eceff1;        /* teinte neutre pendant le chargement, jamais un écran blanc */
  overflow: hidden;
}

/* Message de repli : c'est le texte DÉJÀ TRADUIT de la page, jamais réécrit ici. */
.mas-carte__fallback {
  padding: 1rem;
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.45;
}

/* Repères : masqués quand la carte fonctionne, VISIBLES et cliquables quand elle échoue. */
.mas-carte__reperes[hidden] { display: none; }

.mas-carte__reperes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
  padding: 0.75rem 1rem 1rem;
  margin: 0;
}

.mas-carte__reperes a {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.9rem;
  text-decoration: none;
}

.mas-carte__reperes a:hover,
.mas-carte__reperes a:focus-visible { text-decoration: underline; }

/* Bulle au clic sur un repère. */
.mas-carte__bulle { font-size: 0.95rem; line-height: 1.35; }
.mas-carte__bulle a { text-decoration: none; font-weight: 600; }
.mas-carte__bulle a:hover,
.mas-carte__bulle a:focus-visible { text-decoration: underline; }

/* ── Mobile ─────────────────────────────────────────────────────────────────────────────────────
 * Sous 640 px, la carte est un peu plus basse (elle ne doit pas manger tout l'écran) et la mention
 * d'attribution reste lisible sans déborder. Le geste à un doigt fait défiler la PAGE, jamais la
 * carte (réglage `cooperativeGestures` côté script) : c'est ce qui évite qu'un visiteur mobile
 * reste « piégé » dans la carte en faisant défiler la page.
 */
@media (max-width: 640px) {
  .mas-carte__canvas { min-height: 260px; }
  .mas-carte__reperes { padding: 0.6rem 0.75rem 0.85rem; }
  .mas-carte__reperes a { font-size: 0.85rem; }
}

/* L'attribution est une OBLIGATION de licence : on ne la masque jamais, à aucune largeur. */
.mas-carte .maplibregl-ctrl-attrib { display: block !important; font-size: 11px; }
.mas-carte .maplibregl-ctrl-attrib a { text-decoration: underline; }

/* Respect du réglage système « animations réduites ». */
@media (prefers-reduced-motion: reduce) {
  .mas-carte .maplibregl-marker { transition: none !important; }
}

/* ── E1697 — lien externe « voir la rue » (Street View) ───────────────────────────────────────
 * Un simple lien, jamais un panneau embarqué : aucune clé, aucun script Google au rendu de la
 * page (voir doctrine dans transplant-carte-osm.py). `.mas-sr-only` N'EST PAS redéfinie ici — la
 * classe existe déjà dans le CSS critique du site (R86), réutilisée telle quelle.
 */
.mas-carte__streetview {
  margin: 0.6rem 0 0;
}

.mas-carte__streetview a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  text-decoration: underline;
}

.mas-carte__streetview a:hover,
.mas-carte__streetview a:focus-visible { text-decoration-thickness: 2px; }