*{
    margin: 0;
    padding:0;
    text-decoration: none;
    list-style: circle;
    color: black;
    font-family: "Nunito",serif;
}

.section1{

     height: 500px;
     width: 100%;
    margin-top: 80px;
    position: relative;
}

.carousel-item{

    height: 500px;
    width: 100%;
    background-size: cover;
    background-position: center;
}

.monCarousel {

     height: 100%;
     width: 100%;
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: flex-end;
}



.monCarousel  .wordSection{

    color: white;
    margin: 0 30px ;
    font-size: 90px ;
    font-weight: bold;
    font-family: serif !important;
}

span{

    color: rgb(255, 136, 0);
    font-family: serif;
}




.section2{
    
    margin-top: 60px;
    display: flex;
    flex-direction:column;
    align-items: center;
    width: 100%;

}


.section3{

    margin-top: 80px;
    display: flex;
    flex-direction:row;
    justify-content: space-around;
    width: 100%;


}

.section2 div{

    width: 90% ;
}


.section3 div {

     width: 45%  ;
}



.explication{

     margin: 10px;
     font-size: 17px;
     

}

.explicationListe{

    margin: 14px;
   
}



.explicationListe li {

    margin-bottom: 8px;
    font-size: 17px;

}



.imgExplication{

     height: 300px;
     width: 100%;
     margin-bottom: 20px;
     border-radius: 10px;
     
}


#sectionCouleur{

    background-color: rgb(34, 34, 139);
    border: 0px blue solid;
    /* border-bottom-right-radius: 800px 800px;*/
    border-radius: 6% 94% 97% 3% / 30% 12% 88% 70%  ;
    flex-direction: column;
    align-items: center;
    width: 100%;
    z-index: 0;
    
}







#sectionCouleur .div1SectionCouleur{

    width: 90%;
     margin-top: 45px ;
    
}


#sectionCouleur .div2SectionCouleur{

       width: 95%;
       display: flex;
       flex-direction: row;
       justify-content: space-around;
       margin-top: 90px;
       margin-bottom: 130px;
       
       
}

#sectionCouleur div div {

    width: 45%;
}



#sectionCouleur div p  {

    color: rgb(148, 143, 143);
   
}

#sectionCouleur div h2  {

    color: white;
    
 }
 

 .section4{

     margin-top: 60px;
     display: flex;
     flex-direction:column;
     width: 100%;
     align-items: center;

 }

 .section4 div{

       width: 90%;
       

 }

 .section4 :nth-child(2){
 
      margin: 20px;
      display:flex;
      flex-direction: row;
      justify-content: space-around;

 }

 .section4 div div{

      width: 45% ;
      border: 0px solid rgb(72, 72, 214);
      background-color: rgb(72, 72, 214) ;
      padding: 20px;


 }
 
 .section4 div .couleur{ 

    background-color: rgb(216, 216, 28);

 }

 .section5{

       position: relative;
       top: 80px;
       width: 100%;
       height: 400px;
       margin-bottom: 200px;
      
       
 }

 

 .divSection5 {


      height: 100%;
      width: 100%;
      position:absolute;
      top: 0;
      left: 0;
      opacity: 0;
      transition: linear 2s;
      
      

 }

  .divSection5.active{


      opacity: 1;
      z-index: 4;

     
  }

 #activity{

     
     background-image:linear-gradient(rgba(3, 11, 31, 0.658),rgba(3, 11, 31, 0.658)) , url("../image/activity.jpeg");
     background-size: cover;
     background-position: center;
     
     
     

 }

 #formation{

    background-image:linear-gradient(rgba(3, 11, 31, 0.658),rgba(3, 11, 31, 0.658)) , url("../image/hand.jpeg");
    
    background-size: cover;
    background-position: center;
 }

 .divSection5 div{

    height: 100%;
    width: 100%;
    position:absolute;
    top: 0;
    left: 0;
   
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

 }
 
 .section5 .divSection5 div a{

     color: white;
     background-color: rgb(255, 94, 0);
     padding: 10px;
     font-size: 18px;
     margin-bottom: 25px;
     
}

.section5 .divSection5  div p{

     color: white;
     font-size: 23px;
     width: 80%;
     margin-bottom: 20px;
     font-family: serif;
    
}


 .level{

    height: 8px;
    width: 8px;
    position: absolute;
    top: 45%;
    right: 2rem;
    background-color: white;
    border: 0px solid orange;
    border-radius: 100%;
    opacity: 1;
    z-index: 4;

 }

 #levelOne{

     position: absolute;
     top: 55%;
     
 }

 .level.active{
      
    background-color: orange;
 }

.classement{

    text-align: justify;
}







/* Version phone */

@media screen and (max-width: 600px){


    
    
   .monCarousel .wordSection{

    margin: 0 20px ;
    font-size: 60px;

   }

   .explication{

    margin: 10px;
    font-size: 16px;
    
    }

    .explicationListe li {

        margin-bottom: 8px;
        font-size: 16px;
    
    }

   .section3{

    display: flex;
    flex-direction: column;
    align-items: center;

   }

   
   .section3 div{

    width: 90%;
   
   }

   #sectionCouleur{

     background-color: rgb(34, 34, 139); 
    justify-content: flex-start;
    
    
    border-radius: 100% 0% 100% 0% / 2% 88% 12% 98%    ;
   }

   #sectionCouleur .div2SectionCouleur{

    display: flex;
    flex-direction: column-reverse;
    align-items: center;   
    justify-content: flex-start;
    margin-top: 50px;
    margin-bottom: 130px;
   }

   #sectionCouleur div div {

    width: 95%;
   }

   .section4 :nth-child(2){

        flex-direction: column;
        align-items: center;
   }

   .section4 div div{

       width: 85%;
   }

   .section4 div .couleur{ 

    background-color: rgb(216, 216, 28);


   }

   .divSection5 div{

        justify-content: flex-end; 

   }

   .section5 .divSection5 div p{

    color: white;
    font-size: 18px;
    width: 80%;
    margin-bottom: 20px;
}
   
   

}












/* Version tablette */
@media screen and (min-width: 600px) and (max-width: 830px ){



    


   .wordSection{

    margin: 0 30px ;
    font-size: 70px;

   }


   .section3{

    display: flex;
    flex-direction: column;
    align-items: center;

   }

   
   .section3 div{

    width: 90%;
   
   }

   #sectionCouleur{

    background-color: rgb(34, 34, 139); 
   justify-content: flex-start;
   clip-path: polygon(25% 0%, 100% 0, 100% 92%, 0 100%, 0 100%, 0 0);
   
   border-radius: 0%;
  }

  #sectionCouleur .div2SectionCouleur{

   display: flex;
   flex-direction: column-reverse;
   align-items: center;   
   justify-content: flex-start;
   margin-top: 50px;
   margin-bottom: 130px;
  }

  #sectionCouleur div div {

   width: 95%;
  }

  .section4 :nth-child(2){

       flex-direction: column;
       align-items: center;
  }

  .section4 div div{

      width: 85%;
  }

  .section4 div .couleur{ 

   background-color: rgb(216, 216, 28);

  }

  .section5 .divSection5 div p{

    color: white;
    font-size: 18px;
    width: 80%;
    margin-bottom: 15px;
}
  
  

}