/* ***************************************************************************************************** */
/* HEADER (VIDEO AND LOGO)
/* ***************************************************************************************************** */
#metier-header{
  position: relative;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}


/* ***************************************************************************************************** */
/* HEADER > VIDEO
/* ***************************************************************************************************** */
#metier-header > h1{
  display: none;
}

#metier-header .frame-type-textmedia{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

#metier-header .frame-type-textmedia .ce-outer,
#metier-header .frame-type-textmedia .ce-inner,
#metier-header .frame-type-textmedia .ce-column{
  float: none;
  width: 100%;
}

#metier-header .frame-type-textmedia video{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  pointer-events: none;
}

#metier-header .frame-type-textmedia figure,
#metier-header .frame-type-textmedia .video-embed{
  display: block;
  height: 100vh;
}

#metier-header video::-webkit-media-controls-start-playback-button,
#metier-header video::-webkit-media-controls {
    display: none;
}

/* ***************************************************************************************************** */
/* HEADER > LOGO
/* ***************************************************************************************************** */
#metier-header .frame-type-image{
  max-width: 400px;
}

#metier-header .frame-type-image .ce-gallery{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

#metier-header .frame-type-image .frame + .frame{
  margin-top: 0;
}

#metier-header .frame-type-image figure{
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

#metier-header .frame-type-image figure img{
  max-width: 240px;
}

@media only screen and (min-width: 600px) {
  #metier-header .frame-type-image figure img{
    max-width: 100%;
  }
}


/* ***************************************************************************************************** */
/* ETAPES INTRO (NAV)
/* ***************************************************************************************************** */
#etapes-intro-wrapper{
  background: #FFFFFF;
  padding: 120px 0;
}

@media only screen and (min-width: 600px) {
  #etapes-intro-wrapper{
    padding: 0;
  }
}

#etapes-intro{
  padding: 30px 0;
    opacity: 1;
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
}


@media only screen and (min-width: 600px) {
  #etapes-intro{
    padding: 80px 0 0 0;
    border-bottom: none;
  }
}

@media only screen and (min-width: 1000px) {
  #etapes-intro{
    border-bottom: 1px solid #000000;
    padding: 80px 0;
  }
}

#etapes-intro h2{
  font-size: 2.5rem;
  font-size: clamp(2.5rem, -0.8333333333333335rem + 11.111111111111112vw, 12.5rem);
  font-weight: bold;
  line-height: 1em;
  color: #000000;
}

@media only screen and (min-width: 600px) {
  #etapes-intro h2{
    text-align: center;
  }
}

@media only screen and (min-width: 1000px) {
  #etapes-intro h2{
    text-align: left;
  }
}

#etapes-intro h2 strong {
  color: var(--couleurSpeciale);
}

#etapes-tunnel{
  display: none;
}

@media only screen and (min-width: 600px) {
  #etapes-tunnel{
    padding: 30px 0 120px 0;
    display: block;
  }
}

@media only screen and (min-width: 1000px) {
  #etapes-tunnel{
    padding: 120px 0;
  }
}



/* ***************************************************************************************************** */
/* ETAPES
/* ***************************************************************************************************** */
#etapes{
  background: #FFFFFF;
  color: #000000;
}


/* ***************************************************************************************************** */
/* ETAPES > ETAPE
/* ***************************************************************************************************** */
.etape-box{
   position: relative;
}


/* ***************************************************************************************************** */
/* ETAPES > ETAPE > MAIN TRAIT LEFT
/* ***************************************************************************************************** */
.etape-trait{
  position: absolute;
  width: 100%;
    height: 100%;
  left: 30px;
  top: 0;
  transition: all 2s ease;
}


@media only screen and (min-width: 1000px) {
  .etape-trait{
    left: 65px;
  }
}

@media only screen and (min-width: 1600px) {
  .etape-trait{
    left: 0;
  }
}

.etape-trait .container{
  position: relative;
  height: 100%;
  width: 100%;
}

.etape-trait .container::before{
  background: #000000;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 100%;
  content: '';
}


.etape-fullcontent-trait{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
    height: 100%;
}

.etape-fullcontent-trait .container{
  width: 100%;
  height: 100%;
  position: relative;
}

.etape-fullcontent-trait .container::before{
  background: #FFFFFF;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 100%;
  content: '';
}


/* ***************************************************************************************************** */
/* ETAPES > ETAPE > NUMBER
/* ***************************************************************************************************** */
.etape-number{
  left: 0;
  transform: translateX(-15px);
  position: sticky;
  top: 30px;
  z-index: 51;
}

@media only screen and (min-width: 1600px) {
  .etape-number{
    transform: translateX(-60px);
  }
}

.etape-number span{
  font-size: 20px;
  width: 30px;
  height: 30px;
  border: 1px solid #000000;
  display: block;
  border-radius: 320px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #FFF;
  font-weight: bold;
}

@media only screen and (min-width: 1000px) {
  .etape-number span{
    font-size: 40px;
    width: 60px;
    height: 60px;
  }
}


/* ***************************************************************************************************** */
/* ETAPES > ETAPE > TITLE
/* ***************************************************************************************************** */
#etapes h2{
  font-size: 2.5rem;
  font-size: clamp(2.5rem, -0.8333333333333335rem + 11.111111111111112vw, 12.5rem);
  font-weight: bolder;
  line-height: .7em;
  position: relative;
  line-height: 100%;
}

#etapes h2::after{
  content: '.';
  font-size: 2.5rem;
  font-size: clamp(2.5rem, -0.8333333333333335rem + 11.111111111111112vw, 12.5rem);
  font-weight: bolder;
  color: var(--couleurSpeciale);
  display: inline;
  position: absolute;
}

 #etapes h3{
   font-size: 1.25rem;
   font-size: clamp(1.25rem, 1.0855263157894737rem + 0.6578947368421052vw, 1.875rem);
   color: var(--couleurSpeciale);
   border-bottom: 1px solid #F0F0F0;
   padding-bottom: 10px;
   padding-top: 10px;
   margin-bottom: 10px;
   font-family: 'Kepler';
 }



 /* ***************************************************************************************************** */
 /* ETAPES > ETAPE > CONTENT
 /* ***************************************************************************************************** */
 .etape-content {
  padding-left: 30px;
  padding-bottom: 80px;
  margin-top: -30px;
  position: relative;
  z-index: 50;
  opacity: 1;
}

@media only screen and (min-width: 1000px) {
   .etape-content {
     padding-left: 60px;
     margin-top: -60px;
     padding-bottom: 120px;
   }
}

.etape-content .frame-type-text{
  font-weight: 300;
  font-size: 16px;
}

.etape-content .frame-type-text p + p{
  margin-top: 20px;
}

.etape-content .frame-type-text strong{
  font-weight: 600;
}

.etape-content .frame-type-text a{
  color: var(--bleu);
}


 /* ***************************************************************************************************** */
 /* ETAPES > ETAPE > CONTENT > FULL
 /* ***************************************************************************************************** */
.etape-content.nopad{
  padding-bottom: 40px;
}

.with-full{
  padding-bottom: 120px;
}

.etape-fullcontent{
  position: relative;
  opacity: 1;
}


 /* ***************************************************************************************************** */
 /* ETAPES > ETAPE > CONTENT > FLEX
 /* ***************************************************************************************************** */
@media only screen and (min-width: 600px) {
  .etape-flex{
    display: flex;
    justify-content: space-between;
  }

  .etape-content-left{
    width: 50%;
  }

  .etape-content-right{
    width: 45%;
  }
}

.etape-content-right img{
  border-radius: 50px;
}


/* ***************************************************************************************************** */
/* MASSIVE GRID
/* ***************************************************************************************************** */
#sg-massive-grid{
  opacity: 1;
}

#sg-massive-grid .ce-inner{
  display: flex;
  flex-wrap: wrap;
}

#sg-massive-grid .ce-row{
  width: 50%;
  margin-bottom: 0;
}

#sg-massive-grid .ce-row:nth-child(3),
#sg-massive-grid .ce-row:nth-child(6){
  width: 100%;
}

#sg-massive-grid .ce-column,
#sg-massive-grid figure {
  height: 100%;
  display: block;
}

#sg-massive-grid img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}


#metier-content h2 strong{
  color: var(--couleurSpeciale) !important;
}