html{
    scroll-behavior: smooth;
}
h2, h3, h4, nav-item, #transition, footer{
    text-align: center ;
}

a{
    text-decoration: none ;
    color: aliceblue;
}

/* ****************HEADER***************** */
nav{
    /* z-index: 5; */
}
.collapse{
    margin-left: 4px;
    background: rgb(254, 251, 236);
    margin-top: 0;
}

.nav-item{
    color: darkslategray;
    font-weight: bold;
    padding-right: 45px;
}

header{
    background: url(./images/eleves.png) no-repeat 50% 50%;
    background-size: cover;
    height: 100vh;
    border-radius: 0px 0px 20px 20px;
    margin-bottom: 40px;
}

h1{
    font-size: 10rem;
    color:aliceblue;
    padding: 200px 0 0 20%;
    text-shadow: -3px 3px 2px blue;
    animation: titre ease 3.5s;
}

@keyframes titre {
    0%{
        opacity: 0;
        transform: translateY(180px);
    }
    100%{
        opacity: 1;
        transform: translate(0px);
    }
}

/* *****************************LEFT PART****************************** */
#lesNiveaux{
    /*background :#BCF5A9 ; /* On enlève cette couleut car chaque ligne a sa propre couleur */
    border-radius: 20px;
    padding: 25;

}

.elements{
    padding: 70px 0;

}

/* .elements img{
    border-radius: 50% 50%;
    width: 200px; /* 200px 
} */

.niveau img{
    border-radius: 50% 50%;
    width: 200px; /* 200px */
}

.elements p{
    font-size: 1.2rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    padding-right: 20px;

}

.elements .button{
    text-align: right;
    margin: 15px ;
}


/* **************3 nouvelles classes*******************  */
/* introduites pour définir un arrière plan de chaque cycle */
.elementaire{
    background-color: rgba(241, 238, 219, 0.3);
    box-shadow: 1px 3px 2px rgb(241, 238, 219);
    margin-bottom: 10px ;
    border-radius: 20px;
}

/* .elementaire img{
    border-radius: 50% 50%;
    width: 50px; /* 200px
} */

.niveauElementaire img{
    border: 0.3rem solid blue;
    border-radius: 50% 50%;
    width: 70px;  /* 200px */
}

.niveauElementaire h4, .niveauMoyen h4, .niveauSecondaire h4{
    /* couleur jaune de l'élémentaire : 228 199 67*/
    /* couleur rouge du moyen : 194 106 121*/
    /* couleur bleue du secondaire : 76 111 150*/
    width: 70px;
    height: 70px;
    color: aliceblue;
    /* background : rgb(228,199,67); */
    border: 2px solid aliceblue;
    box-shadow: 1px 3px 2px black;
    border-radius: 50% 50% ;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: ;
    overflow: hidden;
    padding-top: 20px; 
    /* padding: 10px;
    text-align: center; */
}

.niveauElementaire h4{
    /* couleur jaune de l'élémentaire : 228 199 67*/
    /* couleur rouge du moyen : 194 106 121*/
    /* couleur bleue du secondaire : 76 111 150*/
    background : rgb(228,199,67);
}


.moyen{
    background-color: rgba(233, 219, 222, 0.3);
    box-shadow: 1px 3px 2px rgb(233, 219, 222);
    margin-bottom: 10px ;
    border-radius: 20px;
}

.niveauMoyen h4{
    /* couleur jaune de l'élémentaire : 228 199 67*/
    /* couleur rouge du moyen : 194 106 121*/
    /* couleur bleue du secondaire : 76 111 150*/
    background : rgb(194,106,121);
}

.secondaire{
    background-color: rgb(219, 228, 236);
    box-shadow: 1px 3px 2px rgba(219, 228, 236, 0.3);
    margin-bottom: 10px ;
    border-radius: 20px;
}

.niveauSecondaire h4{
    /* couleur jaune de l'élémentaire : 228 199 67*/
    /* couleur rouge du moyen : 194 106 121*/
    /* couleur bleue du secondaire : 76 111 150*/
    background : rgb(76,111,150);
}

/* ****************RIGHT PART*************************** */
#lesPartenaires{
    background: rgba(152, 104, 51, 0.1);
    border-radius: 20px ;
    padding: 20px ;
}

.tips{
    height: 200px ;
    width: 200px ;
    margin: 20px auto;
}

.tips h4{
    position: relative;
    color: green;
    top: 50%;
    transform: translateY(-50%);
    text-shadow: 1px 1px 0 #BCF5A9 ;
}

.tips:hover{
    transform: scale(1.08);
    opacity: 0.7;
    transition: ease-out 0.2s;
}

#transition{
    padding: 50px 0;
}

#transition img{
    width: 90%;
    animation: balaie 10s ease 0s 1 normal forwards;
}

@keyframes balaie {
    0% {
      animation-timing-function: ease-in;
      opacity: 1;
      transform: translateY(-45px);
    }
  
    24% {
      opacity: 1;
    }
  
    40% {
      animation-timing-function: ease-in;
      transform: translateY(-24px);
    }
  
    65% {
      animation-timing-function: ease-in;
      transform: translateY(-12px);
    }
  
    82% {
      animation-timing-function: ease-in;
      transform: translateY(-6px);
    }
  
    93% {
      animation-timing-function: ease-in;
      transform: translateY(-4px);
    }
  
    25%,
    55%,
    75%,
    87% {
      animation-timing-function: ease-out;
      transform: translateY(0px);
    }
  
    100% {
      animation-timing-function: ease-out;
      opacity: 1;
      transform: translateY(0px);
    }
  }

  footer{
      background-color: rgb(23, 25, 30);
      color: aliceblue;
      padding: 15px 0 4px 0;
  }

  /* *******************MEDIA QUERIES ******************** */
  @media screen and (max-width: 990px){
      #rightPart{
          display: flex;
      }

      #rightPart h2{
          display: none ;
      }

      .tips{
          height:130px;
          width:130px;
      }
  }

  @media screen and (max-width: 790px){
    h1{
        font-size: 3rem;
    }

    .elements img{
        max-width: 140px ;
        margin-top: 40px ;
    }

    .tips{
        height: 90px;
        width: 90px;
    }

    .tips h4{
        font-size: 0.9rem;
    }
    
}

@media screen and (max-width: 580px){
    .elements{
        padding: 15px 0;
        text-align: center;
    }

    .elements img{
        margin-bottom: 10px;
    }
    
    .nav{
        display:none !important ;
    }
}

/* colorzilla.com : 
cssanimate.com
cssgenerators.net
westciv.com
animista.net
cssgenerator.org/filter-css-generator.html
imageslidermaker.com
fancy-border-radius
bennettfeely.com/clippy/ */