/* ============================================================
   STYLE DE « OÙ C'EST ? » (seulement ce qui lui est propre)
   Le reste de la page : /salon/salon.css et /style.css
   ============================================================ */

.geo-manche { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.geo-consigne { font-family: var(--police-titre); font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 800; color: var(--fougere-nuit); }

/* La photo (un bouton : un clic l'agrandit en plein écran) */
.geo-photo {
  display: block; padding: 0; background: none; box-shadow: none; border-radius: 14px;
  max-width: 100%; cursor: zoom-in;
}
.geo-photo:hover { background: none; }
.geo-photo:active { transform: none; }
.geo-photo img {
  display: block; max-width: 100%; max-height: 34vh; border-radius: 14px;
  border: 4px solid #fff; box-shadow: var(--ombre-forte);
}
.geo-photo.agrandie {
  position: fixed; inset: 0; z-index: 50; border-radius: 0; cursor: zoom-out;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20, 30, 16, 0.92);
}
.geo-photo.agrandie img { max-width: 96vw; max-height: 94vh; }

/* Barre de temps */
.geo-barre { flex: 1; height: 10px; border-radius: 999px; background: var(--beige-fonce); overflow: hidden; }
.geo-barre span { display: block; height: 100%; width: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--fougere), var(--mousse)); }
.geo-barre.urgent span { background: linear-gradient(90deg, var(--rouge), #d9774f); }
.geo-chrono { font-weight: 800; font-size: 1.3em; color: var(--fougere-fonce); min-width: 52px; font-variant-numeric: tabular-nums; }
.geo-barre.urgent + .geo-chrono { color: var(--rouge); }

/* La carte */
.geo-carte {
  width: 100%; height: 340px; border-radius: 14px; overflow: hidden;
  border: 3px solid #fff; box-shadow: var(--ombre); background: #aad3df; /* couleur de la mer en attendant */
  cursor: crosshair;
}
.geo-carte .leaflet-container { font: inherit; }
.geo-message { font-weight: 600; color: var(--fougere-fonce); min-height: 1.5em; }

/* Révélation */
.geo-revelation {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 24px; border-radius: 14px;
  background: var(--ocre-pale); border: 2px solid var(--ocre); animation: apparait 0.3s ease-out;
}
.geo-revelation small { color: #7a5813; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }
.geo-revelation strong { font-family: var(--police-titre); font-size: 1.4em; color: var(--fougere-nuit); }
#geoMaDistance { font-weight: 600; }
.geo-credit { font-size: 0.75em; color: var(--texte-doux); }

/* Étiquettes sur la carte (pseudo et distance, nom du lieu) */
.geo-etiquette { font: inherit; font-weight: 600; font-size: 0.85em; }
.geo-etiquette-lieu { background: var(--ocre); color: var(--fougere-nuit); border-color: var(--ocre); font-weight: 800; }

/* ---------- Petit écran (téléphone) ---------- */
@media (max-width: 800px) {
  .geo-photo img { max-height: 28vh; }
  .geo-carte { height: 280px; }
}

/* La carte forme son propre "étage" : les boutons +/− de Leaflet (très haut
   placés à l'intérieur) ne passent plus par-dessus le bandeau du site */
.geo-carte { position: relative; z-index: 0; isolation: isolate; }

/* ---------- Téléphone : la photo et la carte tiennent ensemble à l'écran ---------- */
@media (max-width: 800px) {
  .geo-manche { gap: 8px; }
  .geo-consigne { font-size: 1.1rem; }
  .geo-photo img { max-height: 24vh; }
  .geo-carte { height: 42vh; min-height: 220px; }
  /* Photo agrandie : tout l'écran, et on peut zoomer avec deux doigts */
  .geo-photo.agrandie { touch-action: pinch-zoom; }
}