.mapbox-itinerary-widget {
    display: flex;
    gap: 64px;
    flex-direction: row;
    justify-content: flex-start;
	overflow: hidden;
	border-radius: 8px;
}

.mapboxgl-canvas {
	overflow: hidden;
	border-radius: 8px;
}

.mapbox-itinerary-map {
	border-radius: 8px;
}

.itinerary-details {
  position: relative;
  width: 50%;
  height: 75vh;              /* même hauteur que la carte */
  display: flex;
  flex-direction: column;  
  overflow: hidden;
  border-radius: 14px;
}

/* Conteneur texte + image */
.escale-detail-container {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 16px;
  height: 100%; 
}

/* Titre & Flèches de navigation */
.itinerary-header {
	display: flex;
	align-items: center;
    justify-content: space-between;
	font-family: "Clash Display", Sans-serif;
    font-size: 18px;
    line-height: 18px;
    color: var(--e-global-color-6622a91);
}

.arrows-nav {
	gap: 8px;
}

.arrows-nav button svg {
	display: block;
}

.arrows-nav button, .arrows-nav button:focus, .arrows-nav button:active {
	border: solid 1px var(--e-global-color-6622a91);
	color: var(--e-global-color-6622a91);
	background: transparent;
	padding 12px !important;
	width: 50px;
	height: 50px;
}

.arrows-nav button:hover {
	background: var(--e-global-color-6622a91);
	color: var(--e-global-color-secondary);
}

.arrows-nav button:hover svg path {
	fill: #FFFFFF;
}

/* Texte */
.escale-text {
  color: var(--e-global-color-secondary); /* ou la couleur de votre design */
	flex: 0 0 auto;            /* hauteur auto selon contenu */
  overflow: visible;
}

/* Image */
.escale-image {
	  flex: 1 1 auto;            /* prend tout l’espace restant */
  overflow: hidden;
}

.escale-image img {
  width: auto;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* Facultatif : ajuster titre/texte */
.escale-text h4 {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
}
.escale-text p {
  margin: 0;
  line-height: 1.6;
}

/* Bouton Info MapBox */
.mapbox-itinerary-map button {
	background-color: transparent;
}

/* Responsive Design */
@media only screen and (max-width: 1024px) {
	.mapbox-itinerary-widget {
		flex-direction: column;
	}
	.escale-detail-container {
		flex-direction: column;
	}
	.mapbox-itinerary-map, .mapboxgl-canvas {
		width: 100% !important;
		height: 50vh !important;
	}
	.itinerary-details {
		width: 100%;
		height: auto;
		gap: 32px;
	}
	.escale-text, .escale-image {
		flex: auto;
	}
	.escale-image img {
		height: 250px;	
	}
}