/** BLOCS **/

body {
    margin: 0;
    font-family: 'Montserrat', Arial, sans-serif;
}

.bloc-intro {
   	max-width: 1440px; 
}

.intro-box {
    background-color: #F6FAF6;
    border-radius: 12px;
    padding: 16px 24px;
    max-width: 950px;
    font-weight: 600;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 20px;
    color : #00323A;
    line-height: 36px;
}
  
.bloc-titre-niveau {
  	max-width: 1440px;
  	padding: 0px 20px 20px 20px;
}
  
.bloc-niveau {
  	max-width: 900px;
  	padding: 12px 8px 6px 8px;
}

.bloc-niveau-logo {
	font-family: 'Montserrat', Arial, sans-serif;
	font-size: 24px;
	font-weight: 700;
    color: #000000;
	padding: 24px 4px;
	border-radius: 12px;
	max-width: 200px;
    min-width: 200px;
    min-height: 250px;
	row-gap: 26px;
	flex-direction: column;
	display: flex;
	width: auto;
}

.bloc-ML {
  	max-width: 1440px;
  	padding: 100px 20px 48px 20px;
}

.bloc-niveau-logo.casque {
    background-color: #F4F9F3;
}
.bloc-niveau-logo.bouclier {
    background-color: #EBF4EA;
}  
.bloc-niveau-logo.armure {
    background-color: #CFE1DE;
}  
.bloc-niveau-logo.forteresse {
    background-color: #97C0BA;
} 

.visuel {
    margin-bottom: 0 0;
    width: auto;
    height: 138px;
}

.col-gap-niveau {
    column-gap: 26px;
}

.container-logo {
	padding: 0px 0px 38px 0px;
	height: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 210px!important;
}

.bloc-progress-mob {
	width:100%;
	padding: 16px 0px;
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.progress-casque-mob {
    height: 25px;
	border: 1px solid;
	border-color: #C9C9C9;
	border-radius: 99999px;
	padding: 0px!important;
	margin: 0px!important;
	background-color: #F4F9F3;
    width: 100%;
	max-width: 200px;
}

.progress-bouclier-mob {
    height: 25px;
	border: 1px solid;
	border-color: #C9C9C9;
	border-radius: 99999px;
	padding: 0px!important;
	margin: 0px!important;
	background-color: #EBF4EA;
    width: 100%;
	max-width: 200px;
}

.progress-armure-mob {
    height: 25px;
	border: 1px solid;
	border-color: #C9C9C9;
	border-radius: 99999px;
	padding: 0px!important;
	margin: 0px!important;
	background-color: #CFE1DE;
    width: 100%;
	max-width: 200px;
}

.progress-forteresse-mob {
    height: 25px;
	border: 1px solid;
	border-color: #C9C9C9;
	border-radius: 99999px;
	padding: 0px!important;
	margin: 0px!important;
	background-color: #97C0BA;
    width: 100%;
	max-width: 200px;
}

.bloc-progress-labels-mob {
    display: flex;
    justify-content: space-between;
    padding: 0!important;
    width: 210px;
}


/** BARRE DE PROGRESSION **/  
  
.progress {
    height: 25px;
	border: 1px solid;
	border-color: #C9C9C9;
	border-radius: 99999px;
	padding: 0px!important;
	margin: 0px!important;
	position: relative;
}
  
.progress-bar {
   	position:absolute;
  	top : 0;
  	bottom: 0;
  	border-radius: 999px;
  	height:100%;
}
  
.pg-casque {
  	width: 25%;
 	background-color: #F4F9F3;
    z-index: 4;
  	border-radius: 999px;
  	position: relative;
}
  
.pg-bouclier {
  	width: 50%;
 	background-color: #EBF4EA;
    z-index: 3;
  	border-radius: 999px;
}
 
.pg-armure {
  	width: 75%;
 	background-color: #CFE1DE;
    z-index: 2;
  	border-radius: 999px;
}
  
.pg-forteresse {
  	width: 100%;
 	background-color: #97C0BA;
    z-index: 1;
  	border-radius: 999px;
}

.bloc-progress {
  	max-width: 900px;
  	padding: 24px 22px 6px 22px;
}
  
.bloc-progress-indicateur {
  	max-width: 920px;
  	padding: 16px 16px 6px 16px;
}

.bloc-progress-labels {
    display: flex;
    justify-content: space-between;
    padding: 0!important;
      
}
  
.progress-labels {
    background-color: #ffffff;
    color: #007461;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 18px;
    line-height: 25px;
    font-weight: 700;
	padding: 6px 10px;
    border-radius : 12px;
    filter: drop-shadow(0 0px 8px rgb(0 0 0 / 0.1));
	min-width: 50px;
}

/** SWIPER **/

.swiper-pagination-bullet-active {
    background-color: #007461!important;
}
 
.swiper-pagination.bleu > .swiper-pagination-bullet-active {
    background-color: #004652!important;
}
   

/** TEXTES **/

.intro-bold {
    font-weight: 800;
}

.intro-text {
 font-size: 16px;
 font-family: 'Montserrat', Arial, sans-serif;
 font-weight: 600;
 line-height: 25px;
}

.titre-niveau {
 padding-bottom: 0px!important;
 margin: 0 0!important;
}

.titre-ML {
font-family : 'Montserrat', Arial, sans-serif;
font-size: 12px;
font-weight: 300;
}

.texte-ML {
font-family : 'Montserrat', Arial, sans-serif;
font-size: 10px;
font-weight: 300;
}

h1 {
    font-size: 40px;
    font-weight: 700;
    padding: 24px 24px 32px 24px;
      margin-bottom: 0px!important;
}

h2 {
    font-size: 32px;
    font-weight: 700;
    padding: 20px 20px;
    margin-bottom: 0px!important;
}

.assurio {
    bottom: 0px;
    position: relative;
    width: 156px;
}

.titre-section {
	font-family: 'Montserrat', Arial, sans-serif;
	font-size: 30px;
	font-weight: 700;
	padding: 20px 0px;
	line-height: 25px;
}

/** CTA **/

.cta-button {
    background-color: #007461;
    color:white;
    padding:12px 24px;
    border: none;
    border-radius: 30px;
    font-weight: bold;
    font-size: 1rem;
    margin: 2rem auto;
    display: inline-block;
    cursor: pointer;
    user-select: none;
    font-family: 'Montserrat', Arial, sans-serif;
}
  
.cta-button.fleche-droite {
    padding: 12px 50px 12px 24px;
}
    
.cta-button.fleche-droite:after {
  	content: "";
	height: 24px;
	width: 24px;
	background: url(../img/fleche-droite.svg) no-repeat;
	position: absolute;
	margin-left: 8px;
	margin-top: 0px;
}

.cta-button:hover {
      background-color: #075144;
}


/** RESPONSIVE **/

@media screen and (min-width: 991px) and (max-width: 992px) {
    .bloc-progress {
		max-width: 700px!important;
	}

	.bloc-progress-indicateur {
		max-width: 720px!important;
	}

}

@media screen and (min-width: 768px) and (max-width: 992px) {
    .bloc-niveau-logo {
        min-width: 150px!important;
        max-width: 150px!important;
        min-height: 200px!important;
		padding: 8px 4px;
		justify-content: center;
    }

	.visuel {
		margin-bottom: 0 0;
		width: auto;
		height: 100px;
	}

}

@media (max-width: 600px) {
    
    }
  

@media screen and (max-width: 767px) {
  .card-pad-mob {
    padding-right: 0.25rem!important;
    padding-left: 0.25rem!important;
  }
.carrousel {
    display:block!important;
  }
.grille {
  	display:none!important;
  }
}
    
@media screen and (min-width: 768px) {
  .carrousel {
    display:none!important;
  }
  .grille {
  	display:block!important;
  }
}