:root {
  --brand: #DD312A;
  --brand-light: #F0A29F;
}

/* Bug Mapbox GL JS connu et non résolu (projection 'globe' + padding bottom) : au-delà d'un
   certain dézoom, un anneau apparaît autour du globe et laisse voir... la couleur de fond du
   document. Contournement confirmé par les mainteneurs/utilisateurs Mapbox : caler ce fond sur
   la couleur du ciel au plus proche du globe plutôt que sur une couleur arbitraire.
   Voir https://github.com/mapbox/mapbox-gl-js/issues/12636
   #05080f = 'space-color' assombri par l'app (bleu nuit quasi noir, voir globe.ts) au lieu du
   défaut Mapbox #010b19. */
body { margin: 0; padding: 0; overscroll-behavior: none; background: #05080f; }
small { font-size: .75em; }
button:focus { outline: none !important; box-shadow: none !important; }

.btn-primary { background-color: var(--brand); border-color: var(--brand); color: #FFFFFF; }
.btn-primary:hover { background-color: #E8635D !important; border-color: #E8635D !important; }
.btn-primary:active { background-color: var(--brand) !important; border-color: var(--brand) !important; }
.text-bg-primary { background-color: var(--brand) !important; }

.mapboxgl-ctrl-logo { display: none !important; }
.mapboxgl-ctrl-bottom-right { display: none !important; }

#map { position: fixed; inset: 0; width: 100%; height: 100%; }

/* Accueil (globe verrouillé) : pas de curseur "main", le globe ne se drag pas. */
#map.globe-locked .mapboxgl-canvas-container { cursor: default !important; }

/* ---------- Bouton d'ouverture du menu ---------- */
.menu-toggle-btn {
  width: 48px;
  height: 48px;
  padding: 0;
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
  z-index: 10; /* doit rester cliquable au-dessus du trip-panel (z-index: 5) */
}
.menu-toggle-icon,
.menu-toggle-icon::before,
.menu-toggle-icon::after {
  content: "";
  display: block;
  width: 20px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  position: relative;
}
.menu-toggle-icon { margin: 0 auto; }
.menu-toggle-icon::before { position: absolute; top: -6px; }
.menu-toggle-icon::after { position: absolute; top: 6px; }

/* ---------- Menu voyages (offcanvas) ---------- */
#home-menu {
  --bs-offcanvas-width: 450px;
  --bs-offcanvas-border-width: 0;
}
.trip-list-item { border-bottom: 1px solid rgba(0, 0, 0, .08); }
.trip-list-link { padding: .75rem .25rem; text-decoration: none; color: inherit; gap: .75rem; }
.trip-list-link:hover .fw-bold { color: var(--brand); }
.trip-list-dates { color: var(--brand); }
.trip-list-text { min-width: 0; }
.trip-list-cover {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: .5rem;
  object-fit: cover;
}
.trip-list-cover-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand);
  color: #fff;
  font-weight: bold;
  font-size: 1.1rem;
}

/* ---------- Panneau étapes desktop ---------- */
.trip-panel {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 360px;
  max-width: 90vw;
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(4px);
  box-shadow: 2px 0 12px rgba(0, 0, 0, .25);
  z-index: 5;
  /* padding-top dégagé pour ne jamais chevaucher le bouton menu (☰), fixe en haut à gauche */
  padding: 4.5rem 1rem 1rem;
}
.trip-panel-header { flex: 0 0 auto; }
.trip-panel-body { padding-top: .5rem; }

/* ---------- Timeline (desktop) ---------- */
.timeline { border-left: 1px solid hsl(0, 0%, 85%); position: relative; list-style: none; margin-left: 1rem; }
.timeline .timeline-item { position: relative; cursor: pointer; padding-bottom: .25rem; }
.timeline .timeline-item.step-upcoming > * { opacity: .35; }
.timeline .timeline-item > .timeline-icon { opacity: 1; }
.timeline .timeline-icon {
  position: absolute; top: 0; left: -38px;
  background-color: var(--brand); color: #FFFFFF;
  border-radius: 50%; height: 26px; width: 26px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 0 var(--brand);
}
/*.timeline .timeline-item.step-past > .timeline-icon { background-color: var(--brand-light); }*/
.timeline .timeline-item.step-current-first > .timeline-icon { animation: pulse 1.5s infinite; }
.timeline .timeline-item.step-upcoming > .timeline-icon { background-color: #CECECE; color: #666666; }
/* Titre aligné verticalement sur la bulle (même hauteur qu'elle) et un peu plus petit qu'en mobile. */
.timeline .name { font-size: 1.4rem; line-height: 26px; }

/* Carte "accueil" en tête des étapes (timeline desktop + swiper mobile) : photo de couverture en
   fond (ou couleur de la charte à défaut), superposée d'un dégradé pour garder le texte lisible. */
.timeline-home-body,
.step-card-home {
  background-size: cover;
  background-position: center;
  color: #fff;
  position: relative;
  isolation: isolate; /* le pseudo-élément ::before ne doit couvrir que cet élément, pas ses voisins */
}
.timeline-home-body::before,
.step-card-home::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 0, .15), rgba(0, 0, 0, .6));
  border-radius: inherit;
}
.timeline-home-body.no-cover,
.step-card-home.no-cover { background-color: var(--brand); }
.timeline-home-body.no-cover::before,
.step-card-home.no-cover::before { background: none; }

.timeline-home-body {
  border-radius: .5rem;
  padding: .75rem 1rem;
  min-height: 72px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.step-card-home {
  overflow: hidden; /* respecte le border-radius du .card malgré le fond image (.step-card fixe déjà la hauteur) */
}
.step-card-home .card-body {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.step-description { font-size: .85rem; color: #444; }

@keyframes pulse { 0% { box-shadow: 0 0 0 0 #DD312A66; } 100% { box-shadow: 0 0 0 20px #DD312A00; } }

/* ---------- Markers sur le globe ---------- */
.trip-marker {
  color: #FFFFFF;
  background-color: var(--brand);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-size: 12px;
  box-shadow: 0 0 2px rgba(0, 0, 0, .6);
  border: 2px solid #fff;
}
.trip-marker-pulse { animation: marker-pulse .8s ease-out 1; }
@keyframes marker-pulse {
  0% { box-shadow: 0 0 0 0 rgba(221, 49, 42, .8), 0 0 2px rgba(0, 0, 0, .6); }
  100% { box-shadow: 0 0 0 16px rgba(221, 49, 42, 0), 0 0 2px rgba(0, 0, 0, .6); }
}

/* ---------- Galerie photo ---------- */
.gallery-thumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: .5rem; }
.gallery-thumb {
  width: 56px; height: 56px; object-fit: cover;
  border-radius: 6px; cursor: pointer;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
  transition: transform .15s ease;
}
.gallery-thumb:hover { transform: scale(1.06); }

.gallery-modal-img { max-width: 100%; max-height: 78vh; object-fit: contain; }
.gallery-nav-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  color: #fff; font-size: 1.5rem; background: transparent; border: none;
  padding: .5rem 1rem; z-index: 2;
}
.gallery-nav-btn:hover { color: var(--brand-light); }
.gallery-nav-prev { left: 0; }
.gallery-nav-next { right: 0; }

/* ---------- Étapes mobile (Swiper) ---------- */
.trip-swiper-wrap {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 5;
  padding: .5rem .75rem calc(.75rem + env(safe-area-inset-bottom));
}
.trip-back-mobile-btn {
  margin-bottom: .5rem;
  padding: .45rem 1.1rem;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, .97);
  color: #000000;
  font-weight: 600;
  font-size: .85rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .3);
}
.trip-back-mobile-btn:hover,
.trip-back-mobile-btn:active { background: #ffffff; color: #000000; }

/*#trip-swiper { padding: .25rem 0 .5rem; }*/
.step-card {
  border: none;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .3);
  height: min(32vh, 150px);
  overflow-y: auto;
  background: rgba(255, 255, 255, .97);
}
.step-card .name { font-size: 1.75rem; }
.step-card-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  margin-bottom: .4rem;
  font-size: .75rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 767.98px) {
  .trip-panel { display: none !important; }
  /* Sur mobile, le voyage ouvert a déjà son propre bouton retour (trip-back-mobile, en bas) :
     le bouton retour fixe en haut à gauche reste réservé au desktop, et le bouton menu (☰) y
     reste donc visible même voyage ouvert (pas de bascule menu/retour comme sur desktop). */
  #trip-back { display: none !important; }
  #menu-toggle { display: inline-block !important; }
}
@media (min-width: 768px) {
  .trip-swiper-wrap { display: none !important; }
}