/* Carte du voyage (V1) : conteneur MapLibre + pins + popup. Mobile-first. */

.ody-map {
  position: relative;
  width: 100%;
  height: 340px;
  border-radius: 10px;
  overflow: hidden;
  background: #cdddea; /* couleur mer, le temps du chargement */
}
.ody-map .maplibregl-canvas { outline: none; }

/* Marqueurs = cercles numérotés (fini les pins) : vert pour les étapes passées, or pour la dernière connue. */
.ody-marker {
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font: 600 12px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  /* ⛔ CE VERT RESTE, et ce n'est pas un oubli : sur la carte il n'est pas un héritage mais un
     CODE (vert = étapes passées, or = dernière étape connue, décision du 2026-07-12). */
  color: #fff; background: #1d5c4f; border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
  cursor: pointer; user-select: none; -webkit-user-select: none;
  transition: transform .1s ease, opacity .35s ease;
}
.ody-marker.is-last {
  width: 28px; height: 28px; font-size: 13px;
  background: #c2853a; /* or "étincelle" = dernière étape connue */
  box-shadow: 0 0 0 5px rgba(194, 133, 58, .22), 0 1px 3px rgba(0, 0, 0, .35);
}
.ody-marker:active { transform: scale(1.12); }

/* Nom de l'étape sous le marqueur (tiré de nos données p.nom), style "label de carte" (sobre + halo blanc).
   Affiché SEULEMENT en cinématique : masqué par défaut, révélé quand .ody-cine est sur le conteneur de carte. */
.ody-marker-label {
  display: none;
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  margin-top: 13px; white-space: nowrap; /* 13px : dégage le nom sous l'étincelle qui grossit à l'arrêt */
  font: 600 12px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #4c463b;
  text-shadow: 0 0 3px #eef0f2, 0 0 3px #eef0f2, 0 1px 2px rgba(255, 255, 255, .95);
  pointer-events: none;
}
.ody-cine .ody-marker-label { display: block; }
/* En cinématique, on masque le N° d'étape -> point nu + nom dessous (allégé). En statique, le numéro reste (design verrouillé). */
.ody-cine .ody-marker-num { display: none; }
/* En cinématique, on REMPLACE le point vert par l'étincelle (couche GL qui se pose + grossit + bat) : le cercle du
   marqueur devient invisible (fond/bord/ombre transparents), il ne reste que le nom dessous. Statique = inchangé. */
.ody-cine .ody-marker,
.ody-cine .ody-marker.is-last {
  background: transparent; border-color: transparent; box-shadow: none;
}

/* Bouton "Revivre le voyage" (animation du trajet). */
.ody-play {
  position: absolute; left: 12px; bottom: 12px; z-index: 6;
  width: 44px; height: 44px; border-radius: 50%; border: 0;
  background: #c2853a; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .32);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .25s ease, transform .1s ease;
}
.ody-play::before {
  content: ""; width: 0; height: 0;
  border-style: solid; border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent #fff;
  margin-left: 3px;
}
.ody-play:active { transform: scale(.94); }
.ody-play.playing::before { /* devient un carré STOP pendant la lecture */
  width: 14px; height: 14px; flex: 0 0 14px; box-sizing: border-box;
  border: 0; background: #fff; border-radius: 2px; margin: 0;
}
/* Battement de cœur : seulement en position PLAY (pas STOP), pour donner envie de cliquer. */
@keyframes ody-heartbeat {
  0%, 42%, 100% { transform: scale(1); box-shadow: 0 2px 8px rgba(0, 0, 0, .32), 0 0 0 0 rgba(194, 133, 58, .45); }
  12% { transform: scale(1.14); }
  24% { transform: scale(1); }
  32% { transform: scale(1.09); box-shadow: 0 2px 8px rgba(0, 0, 0, .32), 0 0 0 12px rgba(194, 133, 58, 0); }
}
@media (prefers-reduced-motion: no-preference) {
  .ody-play:not(.playing) { animation: ody-heartbeat 1.8s ease-in-out infinite; }
}

/* Bouton VITESSE (×2 / ×1), même style que les flèches plein écran (.ody-fs) : transparent, vert + halo blanc. */
.ody-speed {
  position: absolute; left: 60px; bottom: 12px; z-index: 6;
  width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent, #101a16);
  font: 800 18px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, .95)) drop-shadow(0 1px 1px rgba(255, 255, 255, .85));
  transition: transform .1s ease; -webkit-tap-highlight-color: transparent;
}
.ody-speed:active { transform: scale(.9); }

/* Carte pleine largeur dans sa carte (Passeur = Conteur : elle touche les bords). */
.card.map-card { padding: 0; overflow: hidden; }

/* Voile + décompte « Le voyage commence dans 3, 2, 1 » (couvre le préchargement des tuiles). */
.ody-veil {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(18, 28, 24, .86); color: #fff; text-align: center;
  opacity: 0; transition: opacity .3s ease; -webkit-tap-highlight-color: transparent;
}
.ody-veil.show { opacity: 1; }
.ody-veil-sub {
  font: 500 24px/1.35 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: .03em; color: #e7ddc7; margin-bottom: 12px;
}
.ody-veil-num { font: 700 72px/1 Georgia, "Times New Roman", serif; color: #e8b45a; min-height: 1em; }
.ody-veil-num.pop { animation: ody-veil-pop .45s ease; }
@keyframes ody-veil-pop {
  0% { transform: scale(.6); opacity: 0; }
  40% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* Voile de FIN (Passeur) : message + bouton d'action + croix. Au-dessus des boutons de la carte (z-index 8). */
.ody-veil-end { z-index: 8; padding: 26px; gap: 24px; }
.ody-veil-msg {
  font: 400 27px/1.4 Georgia, "Times New Roman", serif; color: #f3ead6; max-width: 22ch;
}
.ody-veil-cta {
  border: 0; border-radius: 24px; cursor: pointer; padding: 13px 26px;
  background: #c2853a; color: #fff;
  font: 700 16px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35); -webkit-tap-highlight-color: transparent;
  transition: transform .1s ease;
}
.ody-veil-cta:active { transform: scale(.97); }
.ody-veil-close {
  position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .95); color: #1c2c24;
  font: 400 22px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent; transition: transform .1s ease;
}
.ody-veil-close:active { transform: scale(.92); }

/* Bouton plein écran (deux flèches diagonales), bascule aller/retour. */
.ody-fs {
  position: absolute; right: 8px; bottom: 8px; z-index: 2;
  width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent, #101a16); /* couleur des flèches */
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, .95)) drop-shadow(0 1px 1px rgba(255, 255, 255, .85));
  transition: transform .1s ease; -webkit-tap-highlight-color: transparent;
}
.ody-fs svg { width: 30px; height: 30px; display: block; stroke-width: 2.3; }
.ody-fs:active { transform: scale(.9); }
.ody-fs .fs-close { display: none; }
.ody-fs.is-fs .fs-open { display: none; }
.ody-fs.is-fs .fs-close { display: block; }

/* Faux plein écran (compatible iOS) : la carte remplit tout l'écran.
   height: 100dvh = hauteur RÉELLEMENT visible sur iPhone (exclut la barre Safari) -> le bouton
   "quitter" en bas reste atteignable ; 100vh en repli pour les vieux navigateurs. */
.ody-map-wrap.ody-fullscreen {
  position: fixed; top: 0; left: 0;
  width: 100vw; height: 100vh; height: 100dvh; z-index: 9999; margin: 0; background: #cdddea;
}
.ody-map-wrap.ody-fullscreen .ody-map { height: 100%; border-radius: 0; }
.ody-map-wrap.ody-fullscreen .ody-map-credit {
  position: absolute; left: 8px; top: 8px; margin: 0; z-index: 3;
}
/* En plein écran, on décale le bouton "quitter" au-dessus de la barre/du home indicator iPhone (safe-area). */
.ody-map-wrap.ody-fullscreen .ody-fs {
  right: calc(8px + env(safe-area-inset-right, 0px));
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}

/* Popup au tap. */
.maplibregl-popup.ody-pop .maplibregl-popup-content {
  border-radius: 10px;
  padding: 10px 12px;
  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #2b2b2b;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .18);
}
.ody-pop-place { font-weight: 600; }
.ody-pop-place span { color: #6b6b6b; font-weight: 400; }
.ody-pop-by { color: var(--green, #2e5741); font-size: 13px; margin-top: 1px; }
/* Vignette compacte : plafonnée en hauteur pour que le popup (date + prénom + photo) ne déborde pas
   du haut de l'écran et laisse voir l'étincelle et le nom de la ville. */
.ody-pop-img { display: block; max-width: 100%; max-height: 110px; width: auto; margin: 8px auto 0; border-radius: 6px; }
.ody-pop-text { margin-top: 6px; color: #444; white-space: pre-line; }

/* Attribution OpenStreetMap (obligatoire) : petit "i" dépliable, discret, sous la carte. */
.ody-map-wrap { position: relative; }
.ody-map-credit { margin-top: 4px; text-align: right; font-size: 11px; line-height: 1.4; color: #a49e92; }
.ody-map-credit summary {
  display: inline-block; cursor: pointer; list-style: none;
  width: 15px; height: 15px; line-height: 14px; text-align: center;
  border: 1px solid #c9c3b6; border-radius: 50%; color: #a49e92;
  font: italic 11px Georgia, "Times New Roman", serif; user-select: none;
}
.ody-map-credit summary::-webkit-details-marker { display: none; }
.ody-map-credit span { margin-left: 6px; }