:root {
    --swiper-navigation-size: 18px !important;
}

.ctxt-home .home_promo {
	padding-top:2rem;
}

.hero img {
    display: block;
    max-width: 100%;
    height: auto;
    position: relative;
}

.hero .flex {
    max-width: 74.375em;
    margin: 0 auto;
    position: relative;
}

.hero.configurateur > .flex.ac, .hero.part > .flex.ac {
    height: 100%;
}

.hero.part, .hero.ent {
    position: relative;
    max-height: initial;
    overflow: hidden;
    background-image: url('/fr/images/epargnants/fond-header.jpg');
    background-size: cover;
    background-position: center;
}

header.hero.application:before {
    background: #fff;
    transition: all .5s ease-out;
    opacity: .85;
}
header.hero.ctxt_page_ent:before, header.hero:before {
    content: "";
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    z-index: 0;
    left: 0;
}

.hero .flex.stores div {
    margin: .25rem 0;
}

header.hero {
    position: relative;
    padding: 0;
    max-width: 100%;
    min-height: 250px;
    background: #017C81;
    overflow: hidden;
}

.hero.part.application {
    height: 35rem;
}


.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 .flex.stores {
    position: absolute;
    right: 20px;
    bottom: -20px;
    padding: .3rem .5rem;
    flex-direction: column;
    background: #fff;
    border-radius: 12px;
}

.hero .flex.stores div{
    margin:.25rem 0
}

header.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: .7;
    transform: rotate(234deg);
}

.swiper-button-prev:after, .swiper-button-next:after {
    padding: 10px 14px;
    background: #004494;
    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;
}
.hero.part.application h1+p, .hero.part.application h1 {
    color: #002d61;
}

.hero .actions {
	text-align:center !important;
}

.hero.part.application h1 span {
	color:#004494
}


#mobile {
	width:185px;
	height:390px;
	margin:0 auto;
    background-size: cover;
    background-position: center;
	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) {
	
	header.hero .flex .col_1_2:nth-child(2) article {
		position: relative;
	}
	header.hero .col_1_2 {
		display: flex;
		flex-direction: column;
		width: 49%;
		align-items: center;
		justify-content: center;
	}
	header.hero .col_1_2 article {
		bottom: -40px !important;
		left: auto;
		right: auto;
	}

	.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) {
	
	.hero.part .col_1_2:last-child {
		height: auto;
	}
	
	header.hero .flex .col_1_2:nth-child(2) article {
		position: relative;
		height: auto;
	}

	header.hero .flex .col_1_2 article {
		width: 375px !important; 
	}
	header.hero .col_1_2 article.portrait {
		bottom: 0 !important;
	}
	header.hero .col_1_2 {
		padding: 1rem !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
	}
	header.hero .flex li.col_1_2 {
	   text-align:center
	}
	header.hero .flex li.col_1_2 a {
	   display:block;
	   width:100%
	}
	section:first-of-type > div {
	padding: 1rem;
	}
	#avantages ul {
		padding-left: 0rem;
	}
	.cd-section {
		padding: 1rem;
	}
}

@media screen and (max-width: 25em) {
	.hero.application .portrait, header.hero .flex .col_1_2:nth-child(2) article {
		left: 70% !important;
		position:absolute !important;
		transform:translateX(-50%);
	}
	header.hero .flex div.col_1_2:nth-child(2) {
	   height:566px;
	}
}