:root {
    --swiper-navigation-size: 18px !important;
}

.hero.part.application {
    height: 35rem;
	padding:0;
}

.hero.application .portrait {
    position: absolute;
    bottom: -220px;
    left: 11%;
    height: 566px;
    width: 375px;
	z-index:0;
	transition:all .3s ease-out;
}

.two {
	transition:all .8s ease-out;
}


.hero.part.application img {
    display: block;
    max-width: 100%;
    height: auto;
    position: relative;
    /* margin: 0 auto; */
}


.hero .flex.stores {
    position: absolute;
    right: 20px;
    bottom: -20px;
    flex-direction: column;
	padding: .4rem .6rem;
    background: #fff;
    border-radius: 12px;
}

.hero .flex.stores div{
    margin:.25rem 0
}

.hero.application .portrait #forme {
    background: linear-gradient(-45deg, #005d60, #007178);
    background-size: 100% 100%;
    content: "";
    display: block;
    height: 9310px;
    position: absolute;
    width: 9000px;
    left: -5289px;
    top: 1700px;
    transition: all .8s ease-out;
    opacity: 0;
    transform: rotate(234deg);
}

.swiper-button-prev:after, .swiper-button-next:after {
    padding: 10px 14px;
    background: #25378D;
    border-radius: 50%;
	box-shadow: 0 4px 10px 0 #2a2a2ac4;
}

.swiper-button-next:after, .swiper-button-prev:after {
    color: #FFF;
}

.swiper-button-prev, .swiper-rtl .swiper-button-next {
    left: var(--swiper-navigation-sides-offset,-35px) !important;
    right: auto;
}

.swiper-button-next, .swiper-rtl .swiper-button-prev {
    right: var(--swiper-navigation-sides-offset,-30px) !important;
    left: auto;
}

.swiper-button-next:after {
    right: -7px;
    position: relative;
}

.swiper-button-prev:after {
    right: 7px;
    position: relative;
}

.hero.part #forme + .col_1_2 {
	z-index:2;
}

.application .swiper-button-next:hover, .application .swiper-rtl .swiper-button-prev:hover {
    opacity: 1;
}

.application #forme {
	background:#eacacf;
	display:none;
	opacity:1;
	box-shadow: 0 4px 55px 0 #dbc3c6;
}



#mobile {
	width:185px;
	height:390px;
	margin:0 auto;
	position:absolute;
	top: 9px;
	left: 48px;
}
	
.swiper {
	  width: 100%;
	  height: 100%;
	  border-radius:23px;
}

.swiper-slide {
	  text-align: center;
	  font-size: 18px;
	  background: #fff;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  cursor:grab;
}

.swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
	
#ecrans {
	height: 390px;
	width: 185px;
	background: #fff;
	position: absolute;
	right: 0;
	top: 0;
	border-radius:17px;
}

	
.close {
  position: absolute;
  right: 32px;
  top: 32px;
  width: 32px;
  height: 32px;
  opacity: 0.9;
  transform: rotate(25deg);
  transition:all .25s ease-out;
  transform-origin: 50% 50%;
}

@media screen and (max-width: 73.75em) {
	.hero .flex.stores {
		display:none;
	}
	header.hero .flex .col_1_2 article {
		width: 375px !important; 
	}
	header.hero .col_1_2 {
		padding: 0rem !important;
	}
	header.hero .col_1_2 {
		align-items: start !important;
	}
	.hero.part.application {
		height: auto;
	}
	.hero.part.application .btn.primary.xl {
		font-size: 18px;
		font-size: 1.2rem;
		padding: .8em 3.5em .8em 2em;
		margin-top: 2rem;
	}
	header.hero.application .portrait:before {
		top: 50%;
	}
	.hero.application .portrait {
		left: 20%;
	}
}

@media screen and (max-width: 48em) {
	header.hero .flex .col_1_2 article {
		width: 375px !important; 
	}
	header.hero .col_1_2 article.portrait {
		bottom: -60px !important;
	}
	header.hero .col_1_2 {
		padding: 0rem !important;
	}
	header.hero .col_1_2 {
		align-items: start !important;
	}
	.hero.part.application {
		height: auto;
	}
	header.hero.application .portrait:before {
		top: 50%;
	}
	.hero.part img, .hero.ent img {
		margin: 0 auto;
		max-width: auto;
		width:100%;
	}
	header.hero.part, header.hero.ent, #retrait {
    background:#f3f3f3 !important
	}
}

@media screen and (max-width: 25em) {
	.hero.application .portrait, header.hero .flex .col_1_2:nth-child(2) article {
		left: 70%;
		position:absolute !important;
		transform:translateX(-50%);
	}
	header.hero .flex div.col_1_2:nth-child(2) {
	   height:566px;
	}
}