@charset "utf-8";
/* CSS Document */

.navbar{
	--bs-navbar-nav-link-padding-x: 1.5rem;
}

body{
	font-family: "Rubik", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	color: #4F5665;
}

.wrapvideo{
	position: relative;
	background-image: url("../images/videoslider-illustration-fond.png");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
}

.swiper-slide{
	width: auto !important;
}

.wrapslider{
	padding: 0 2rem;
	position: relative;
}
.btnSwiper{
	position: absolute;
	font-size: 1.5rem;
	color: #0B132A;
	top: 50%;
	transform: translateY(-50%);
}
.btnSwiperPrev{
	left: 0;
}
.btnSwiperNext{
	right: 0;
}
@media (max-width: 767px) {
	.wrapslider{
		padding: 0;
	}
	.btnSwiper{
		display: none;
	}
}

.filtre{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 450px;
	z-index: 0;
	background: linear-gradient(180deg,rgba(69, 187, 194, 0.36) 0%, rgba(69, 187, 194, 0) 100%);
}

.pattern{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 900px;
	z-index: -1;
	background-color: #ffffff;
	background-image:  linear-gradient(rgba(69, 187, 194, 0.15) 1px, transparent 1px), linear-gradient(to right, rgba(69, 187, 194, 0.15) 1px, #ffffff 1px);
	background-size: 70px 70px;
}

.filtre.reverse{
	top: inherit;
	bottom: 0;
	height: 100%;
	background: linear-gradient(0deg,rgba(69, 187, 194, 0.36) 0%, rgba(69, 187, 194, 0) 100%);
}

.rubik-medium {
  font-weight: 500;
}

.rubik-bold {
  font-weight: 700;
}

ul#menu-menu-principal li:last-child, ul#menu-menu-principal-anglais li:last-child{
	display: flex;
}

.nav-link{
	color: #0B132A;
	font-weight: 500;
}

.navbar-light .navbar-toggler{
	position: relative;
	padding: 0;
	border: none !important;
	z-index: 1050;
}

.navbar-toggler span {
   display: block;
   background-color: #46505A;
   height: 2px;
   width: 25px;
   margin-top: 5px;
   margin-bottom: 5px;
   -webkit-transform: rotate(0deg);
   -moz-transform: rotate(0deg);
   -o-transform: rotate(0deg);
   transform: rotate(0deg);
   position: relative;
   left: 0;
   opacity: 1;
}

.navbar-toggler:focus{
	box-shadow: none;
}

.navbar-toggler span:nth-child(1),
.navbar-toggler span:nth-child(2),
.navbar-toggler span:nth-child(3) {
   -webkit-transition: transform .35s ease-in-out;
   -moz-transition: transform .35s ease-in-out;
   -o-transition: transform .35s ease-in-out;
   transition: transform .35s ease-in-out;
}

.navbar-toggler span:nth-child(2){
	width: 20px;
}

.navbar-toggler span:nth-child(3){
	width: 15px;
}

.navbar-toggler:not(.closed) span:nth-child(1) {
    position: absolute;
	width: 25px;
    left: 0px;
    top: 5px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
}

.navbar-toggler:not(.closed) span:nth-child(2) {
    height: 12px;
    background-color: transparent;
	-webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(3605deg);
    transform: rotate(360deg);
	width: 25px;
}

.navbar-toggler:not(.closed) span:nth-child(3) {
    position: absolute;
    left: 0px;
    top: 5px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
	width: 25px;
}

@media (max-width: 1199px) {
	#offcanvas-collapse{
		background-color: #45BBC2;
	}
	.navbar-nav{
		margin: auto !important;
	}
	.nav-link{
		color: white !important;
		font-size: 1.75rem;
		margin: .5rem 0;
	}
	.navOpen .navbar-toggler span:nth-child(1), .navOpen .navbar-toggler span:nth-child(3){
		background-color: #FFFFFF !important;
	}
}


dotlottie-wc{
	width: 300px;
	height: 300px;
}
@media (min-width: 1200px) {
	dotlottie-wc{
		width: 350px;
		height: 350px;
	}
}
@media (min-width: 1400px) {
	dotlottie-wc{
		width: 400px;
		height: 400px;
	}
}

h1{
	color: #0B132A;
	font-weight: 700;
	margin-bottom: 3rem;
}

h2{
	color: #0B132A;
	font-weight: 700;
}

section.ctn h2{
	margin-bottom: 1.5rem;
	margin-top: 3rem;
}

h3{
	color: #45BBC2;
	font-size: 1.2rem;
}

header{
	padding-top: 2rem;
}

section{
	padding: 5rem 0;
}
section.entete{
	position: relative;
	padding-bottom: 0;
}

.btn{
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;

	padding: 1rem 1.5rem;
	font-size: 1rem;
	font-weight: 700;
    border-radius: .75rem;
	
	-webkit-box-shadow: 0px 13px 26px -7px rgba(69, 187, 194, 0.5), 1px -3px 21px -4px rgba(69, 187, 194, 0.3); 
	box-shadow: 0px 13px 26px -7px rgba(69, 187, 194, 0.5), 1px -3px 21px -4px rgba(69, 187, 194, 0.3);
}

.btn-green{ color: white; background-color: #45BBC2 !important; border:none !important; }
.btn-green:hover{ color: #45BBC2 !important; background-color: white !important; }
.btn-green:active{ color: white !important; }
.btn-green:hover:active{ color: #45BBC2 !important; }

.btn-white{ color: #45BBC2; background-color: white !important; border: none !important; }
.btn-white:hover{ color: white !important; background-color: #45BBC2 !important; }
.btn-white:active{ color: #45BBC2 !important; }
.btn-white:hover:active{ color: white !important; }

.btn-white.shadow-white{
	-webkit-box-shadow: 0px 13px 26px -7px rgba(255, 255, 255, 0.5), 1px -3px 21px -4px rgba(255, 255, 255, 0.3); 
	box-shadow: 0px 13px 26px -7px rgba(255, 255, 255, 0.5), 1px -3px 21px -4px rgba(255, 255, 255, 0.3);
}

.btn small{
	font-size: .75rem;
}

.btn-small{
	padding: .5rem .75rem;
	font-size: .9rem;
}

.btn-small small{
	font-size: .6rem;
}
.btn-small .fa-2x{
	font-size: 1.5rem;
}

.btn.radius-xl{
	border-radius: 2rem;
}

.bg-gris{
	background-color: #f5f5f5;
    padding: 3rem;
    border-radius: 2rem;
}
.ribbon{
	--f: 10px; /* control the folded part*/
	--r: 15px; /* control the ribbon shape */
	--t: 25px; /* the top offset */
	position: absolute;
	inset: var(--t) calc(-1*var(--f)) auto auto;
	padding: 0 10px var(--f) calc(10px + var(--r));
	clip-path: 
	polygon(0 0,100% 0,100% calc(100% - var(--f)),calc(100% - var(--f)) 100%,
	calc(100% - var(--f)) calc(100% - var(--f)),0 calc(100% - var(--f)),
	var(--r) calc(50% - var(--f)/2));
	background: #45BBC2;
	box-shadow: 0 calc(-1*var(--f)) 0 inset #0005;
	font-size: .9rem;
	font-weight: bold;
	color: white;
}

.feature{
	background-color: white;
	border-radius: 1.5rem;
	-webkit-box-shadow: 0px 10px 20px -7px rgba(11, 19, 42, 0.3), 1px -3px 21px -4px rgba(11, 19, 42, 0.1); 
	box-shadow: 0px 10px 20px -7px rgba(11, 19, 42, 0.3), 1px -3px 21px -4px rgba(11, 19, 42, 0.1);
}

.feature h2{
	margin-bottom: 0;
	display: inline-block;
	width: min-content;
	min-width: 40%;
	font-size: 1.25rem;
}
@media (max-width: 767px) {
	.feature h2{
		font-size: 1rem;
	}
}

.feature .fa-stack{
	width: 3em;
}

.feature-1{
	border-right: 1px solid #EEEFF2;
	border-bottom: none;
}
.feature-2{
	border-right: 1px solid #EEEFF2;
	border-bottom: none;
}
.feature-3{
	border-right: 1px solid #EEEFF2;
	border-bottom: none;
}
.feature-4{
	border-right: none;
	border-bottom: none;
}
@media (max-width: 1199px) {
	.feature-1{
		border-right: 1px solid #EEEFF2;
		border-bottom: 1px solid #EEEFF2;
	}
	.feature-2{
		border-right: none;
		border-bottom: 1px solid #EEEFF2;
	}
	.feature-3{
		border-right: 1px solid #EEEFF2;
		border-bottom: none;
	}
	.feature-4{
		border-right: none;
		border-bottom: none;
	}
}
@media (max-width: 575px) {
	.feature-1{
		border-right: none;
		border-bottom: 1px solid #EEEFF2;
	}
	.feature-2{
		border-right: none;
		border-bottom: 1px solid #EEEFF2;
	}
	.feature-3{
		border-right: none;
		border-bottom: 1px solid #EEEFF2;
	}
	.feature-4{
		border-right: none;
		border-bottom: none;
	}
}

.icon-background{
	color: #0B132A;
}

footer{
	position: relative;
	color: #0B132A;
	position: relative;
	z-index: 1;
}

footer section, footer div.container{
	position: relative;
	z-index: 1;
}

footer a{
	color: #0B132A;
	text-decoration: none;
	margin: 0 .5rem;
}

.pre-footer{
	padding: 4rem;
	background-color: #45BBC2;
	border-radius: 1.5rem;
}
.pre-footer > div{
	width: 75%;	
}
@media (max-width: 575px) {
	.pre-footer{
		padding: 4rem 2rem;
	}
	.pre-footer > div{
		width: 100%;	
	}
}


/* ========================================================== */
/* TIMELINE */
/* ========================================================== */
.timeline{
	position: relative;
	max-width: 1000px;
	margin: 0 auto;
	padding: 20px 0;
}

.timeline::after{
	content: '';
	position: absolute;
	width: 4px;
	background-color: #45BBC2;
	top: 0;
	bottom: 0;
	left: 50%;
	margin-left: -2px;
	z-index: 1;
}

.timeline-item{
	padding: 10px 40px;
	position: relative;
	background-color: inherit;
	width: 50%;
	box-sizing: border-box;
}

.timeline-item::after{
	content: '';
	position: absolute;
	width: 20px;
	height: 20px;
	background-color: white;
	border: 3px solid #45BBC2;
	top: 20px;
	border-radius: 50%;
	z-index: 2;
}

.left{
	left: 0;
	text-align: right;
	padding-right: 60px;
}

.left::after{
	right: -10px;
}

.right{
	left: 50%;
	text-align: left;
	padding-left: 60px;
}

.right::after{
	left: -10px;
}

.timeline-content{
	padding: 25px 35px;
	background-color: white;
	position: relative;
	border-radius: 8px;
	/*box-shadow: 0 5px 15px rgba(0,0,0,0.08);*/
	-webkit-box-shadow: 0px 10px 20px -7px rgba(11, 19, 42, 0.3), 1px -3px 21px -4px rgba(11, 19, 42, 0.1); 
	box-shadow: 0px 10px 20px -7px rgba(11, 19, 42, 0.3), 1px -3px 21px -4px rgba(11, 19, 42, 0.1);
	transition: transform 0.2s ease-in-out;
}

.timeline-content:hover{
	transform: translateY(-5px);
}

.left .timeline-content::before{
	content: " ";
	position: absolute;
	top: 25px;
	right: -15px;
	border-width: 10px 0 10px 15px;
	border-style: solid;
	border-color: transparent transparent transparent white;
}

.right .timeline-content::before{
	content: " ";
	position: absolute;
	top: 25px;
	left: -15px;
	border-width: 10px 15px 10px 0;
	border-style: solid;
	border-color: transparent white transparent transparent;
}

.timeline-content h2{
	margin-top: 0;
	margin-bottom: 10px;
	color: #2c3e50;
	font-size: 1.4em;
}

.timeline-content p{
	font-size: 0.95em;
	color: #666;
}

@media screen and (max-width: 768px) {
	.timeline::after{
		left: 31px;
		margin-left: 0;
	}
	.timeline-item{
		width: 100%;
		padding-left: 70px;
		padding-right: 25px;
		text-align: left !important;
	}
	.right{
		left: 0%;
	}
	.timeline-item::after{
		left: 23px;
		right: auto;
	}

	.left .timeline-content::before,
	.right .timeline-content::before{
		left: -15px;
		right: auto;
		border-width: 10px 15px 10px 0;
		border-color: transparent white transparent transparent;
	}
}

@media screen and (max-width: 480px) {
	.timeline-item{
		padding-left: 60px;
		padding-right: 15px;
	}
	.timeline-item::after{
		left: 23px;
	}
	.timeline-content{
		padding: 15px 20px;
	}
	.timeline-content h2{
		font-size: 1.4em;
	}
	.timeline-content p{
		font-size: 0.9em;
	}
}