body {
  margin: 0;
  padding: 0;
  z-index: 9999;  /*rajout serge mais ne marche pas pour faire passer la nbx box au-dessus du visualiseur de storymapjs */
}

.ipad-slider {
  display: flex;
}

.quote-slider-wrapper {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}

.quote-slider {
  height: 100vh;
}

.quote-text-wrap {
  display: flex;
  height: 100%;
  overflow:auto;
  background-color: white;
  padding-top:10%;
}

/* changement taille et couleur des fleches de navigation par Claude*/
.swiper-button-next {
  width: 50px; /* Ajustez cette valeur selon vos besoins : by Claude*/
  color: red; /* Change la couleur du bleu au rouge :  by Claude */
}

.swiper-button-prev {
  width: 50px; /* Ajustez cette valeur selon vos besoins */
  color: red; /* Change la couleur du bleu au rouge */
}

.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 74px; /* Ajustez cette valeur selon vos besoins  pour modifier la taille de l'icône de la fleche*/
}


/*pour masquer les boutons sur mobile*/
@media (max-width: 768px) {
  .swiper-button-next,
  .swiper-button-prev {
    display: none;
  }
}

/* fin changement by Claude*/


@media screen and (min-width: 601px) {
.quote-text {
  max-width:90%;                            /*500px; initialement*/
  align-self: center;
  margin:10%;
 font-size:1.5vw;
  /** font-size: 24px;**/
}
}
@media screen and (max-width: 300px) {
	.quote-text {
  max-width: 90%;                            /*500px;  initialement*/
  align-self: center;
  margin:10%;
 font-size:1.5vw;
   /**font-size: 12px;**/
}
}
	
	
.quote-text {
  transition: all 0.3s;
}

.swiper-slide.swiper-slide-next .quote-text,
.swiper-slide.swiper-slide-prev .quote-text {
  opacity: 0;
}

.swiper-slide.swiper-slide-active .quote-text {
  opacity: 1;
}

.image-slider-wrapper {
  position: relative;
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
  background-color: #f1f1f1;
}

.image-slider {
  height: 100vh;  /*100vh initialement*/
}

.swiper-slide {
  position: relative;
  overflow: hidden;   /*hidden initialement*/
}
}

.swiper-slide-inner {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;   /*hidden initialement*/
}

.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  /* overflow: auto; rajouté*/
}

/*---------------tooltip------------------------*/
.survol {
	position: relative;
	color: #000;
border-bottom: 1px dotted; cursor: help;
	cursor: pointer;
	outline: none;
	appearance: none;
	&:hover {
		span {
			opacity: 1;
			transform: translate(-50%, 0);
		}
	}
	span {
		position: absolute;
		left: 50%;
		bottom: 100%;
		opacity: 0;
		margin-bottom: 1em;
		padding: 1em;
		background-color: #000;
		color: #fff;
		font-size: .6em;
		line-height: 1.6;
		text-align: left;
		white-space: nowrap;
		transform: translate(-50%, 1em);
		transition: all .15s ease-in-out;
		&::before {
			content: '';
			position: absolute;
			top: 100%;
			left: 50%;
			width: 0;
			height: 0;
			border: .5em solid transparent;
			border-top-color: #000;
			transform: translate(-50%, 0);
		}
	}
}