*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    background: #EAE9E9;
    /* display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh; */
    font-family: "Montserrat", sans-serif;
    overflow-x: hidden;
  }

  p::first-letter {
    text-transform: uppercase;
  }

  a::first-letter {
    text-transform: uppercase;
  }

  h1::first-letter {
    text-transform: uppercase;
  }

  h2::first-letter {
    text-transform: uppercase;
  }

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

  .error-message{
    color: #dd1616;
    font-style: italic;
  }
  .login-container {
    display: flex;
    /* align-items: center; */
    justify-content: center;
    /* height: 100vh; */
    margin-top: 50px;
  }
  
  .login-card {
    font-family:'Montserrat', sans-serif;
    font-weight: 300;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    max-width: 400px;
    text-align: center;
    padding: 25px 40px 40px;
    box-sizing: border-box;
  }
  
  .login-card h1 {
    color: #343a40;
    margin-bottom: 30px;
  }

  .login-card p:first-child {
    font-weight: 500;
  }
  
  .login-form {
    display: flex;
    flex-direction: column;
  }
  
  .login-form input {
    width: 100%;
    padding: 12px;
    margin-bottom: 20px;
    box-sizing: border-box;
    background-color:#F4F4F4;
    border: 1px solid #dee2e6;
    border-radius: 5px;
  }
  
  .login-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .login-button,
  .register-button {
    flex: 48%;
    padding: 12px;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    transition: background 0.3s ease-in-out, border 0.3s ease-in-out;
  }
  
  .login-button {
    margin-left: 80px;
    margin-right: 80px;
    background: rgb(0, 0, 0);
    border-radius: 20px;
    color: #fff;
        border: solid black 0.5px;

  }
  
 
  .login-button:hover {
    background: rgb(255, 255, 255);
    color: black;
  }

  .image_header{
    width: 100%;
    height: 35vh;
    object-fit: cover;
    border-radius: 0 0 50px 50px;
    box-shadow: -6px 17px 28.4px 0px rgba(0, 0, 0, 0.25);

  }

  h1 {
    font-family: 'Familjen Grotesk', sans-serif;
  }
  
  
  h2{
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: 0.813rem;
  }

  nav .desk_nav {
    margin-top: 20px;
  }

  .desk_nav {
    font-family: "Montserrat", sans-serif;
    border-radius: 20px;
    width: 90%;

  }

  .desk_nav .menu-btn {
    margin-right: 10px;
    margin-left: 10px;
  }


  .desk_nav a:hover {
    color: #171C8F;
  }


  .header{
    max-width: 400px;
    margin: auto;
  }

  label{
    width: fit-content;
  }

  label::first-letter {
    text-transform: uppercase;
  }


.angry-grid-desk{
  display:none;
}





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

    #box-1 h2 {
      font-size: 1.5rem ;
    }

    .login-card {
      width: 90%;
    }
  
    .login-buttons {
      flex-direction: column;
    }
  
    .login-button,
    .register-button {
      flex: 100%;
      margin-bottom: 10px;
      margin-left: 0;
      margin-right: 0;
    }

  }
  
  @media screen and (min-width:900px){
    
    #box-1 h2{
      font-size: 2rem !important ;
    }
main{
  display: flex;
  justify-content: space-evenly;
  align-items: flex-end;
 }

 .image_header{
  height: 40vh;
  border-radius: 0 0 80px 80px;
 }
 .header{
  margin: unset;
  max-width: 40%;
 }

 .header h1{
font-size: 3.125rem;
 }

 .header h2{
font-size: 1.25rem;
 }

}



/* page élève */


.msg {
  font-size: 2rem;
  margin-left: 10px;
}

.out {
 font-size: 2rem;
 margin-left: 10px;
}

.hello{
padding-left: 20px;
font-size: 3rem;
}

.angry-grid-desk{
  margin-top: 20px;
}


.title_page{
  font-size: 2.5rem;
  font-weight: normal;
  padding: 0 15px ;
}


.angry-grid {
   display: grid; 
   grid-template: 1fr 1fr 1fr 1fr 1fr 1fr / 1fr 1fr 1fr 1fr 1fr 1fr;
   padding: 0 15px ;
   gap: 10px;
   height: 500px;
   margin-bottom: 20px;
   
}

.angry-grid div{
  border-radius: 22px;
  padding-left:10px;
  /* padding-right:10px; */

}
  
#item-0 {

  background-color: #d4ea79; 
  grid-row: 1 / 3;
  grid-column: 1 / 7;


  
}

#item-0  h2 {

  font-family: 'Familjen Grotesk', sans-serif;
  font-size: 2.5rem;
  margin: 0;
  /* margin-left: 20px; */
  color: #393F42;

  }

 #item-0 .infos_abs {
  display: flex;
  justify-content: space-between;
  /* margin-left: 20px; */
  margin-right: 20px;
 }

 #item-0 .malus {
  color:#00760C;
  border: 1px solid black;
  border-radius: 10px;
  display: flex;
  align-items: center;
  padding: 0px 5px 0px 5px;
 }


#item-1 {

  background-color: #D2E5E3; 
  border: solid 1px #9FA1A3;
  grid-row: 3 / 7;
  grid-column: 1 / 4;
  
}


#item-2 {

  background-color: #F76647; 
  grid-row: 3 / 5;
  grid-column: 4 / 7;
  
}

#item-2 h2 {
  font-size: 2rem;
  font-family: 'Familjen Grotesk', sans-serif;
  margin: 0;
  /* margin-left: 20px; */
  margin-top: 15px;
 }

 #item-2 .countdown {
  /* margin-left: 20px; */
  margin-top: 20px;
 }

#item-3 {

  background-color: #24272B; 
  color: white;
  grid-row: 5 / 7;
  grid-column: 4 / 7;
  
}

 #item-3 h2 {
  color: white;
  font-size: 2rem;
  margin-left: 15px;
  font-family: 'Familjen Grotesk', sans-serif;
  margin: 0;
  /* margin-left: 20px; */
 }

 #item-3 p {
  color: white;
  font-size: .8rem;
  /* margin-left: 20px; */
 }

 #item-3 .docs_ouverts {
  display: flex;
  flex-direction: column;
  /* margin-left: 20px; */
  font-size: .8rem;
  text-decoration: underline 0.5px white solid;

 }

 .docs_ouverts a {
    color: white;
 }


#item-1  h2 {

  font-family: 'Familjen Grotesk', sans-serif;
  font-size: 2.5rem;
  margin: 0;
  color: #393F42;

  }

#item-1  p {
    /* margin-left: 20px; */
    color: #393F42;
  }

 #item-1 .date {
    font-size: .8rem;
  }

  .menu_cantine {
    margin-top: 30px;
    
  } 

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

    #item-1  h2 {
      font-size: 1.5rem;
    }

    #item-0  h2 {
      font-size: 2rem;
    }

    #item-0  p {
      font-size: .8rem;
    }

    #item-2  h2 {
      font-size: 1rem;
    }

    #item-2 .countdown {
      font-size: .8rem;
    }

    #item-3  h2 {
      font-size: 1rem;
    }

    #item-3  p {
      font-size: .6rem;
    }

    #item-0 .malus {
      font-size:1rem ;
    }
  }



/*MENU MOBILE*/

/* .navbar-mobile{
  display: none;

} */
.navbar-mobile i {
  position: fixed;
  z-index: 11;
  top: 9px;
  left: 15px;
  font-size: 3rem;
  color: black;
  cursor: pointer;
  font-size: 1rem;
}

.modal {
  transition: left 0.9s; /* Change from top to left */
  background-color: #EAE9E9;
  height: 100vh;
  position: fixed;
  top: 0; /* Remove the initial negative top value */
  left: -100vw; /* Set initial left value to -100vw */
  width: 80%;
  z-index: 10;
}

.change-modal {
  left: 0; /* Change from top to left */
}

.navbar-mobile .navbar-mobile-list {
  display: flex;
  height: 100vh;
  flex-direction: column;
  /* align-items: center; */
  justify-content: center;
}

.navbar-mobile .navbar-mobile-list a {
font-size: 1rem;
  font-weight: 500;
  color: black;
  padding-bottom: 1.5rem ;
  padding-left: 1.2rem;
  text-transform: capitalize;
  
}
.profil_img{
  width:73px !important;
  height:73px !important;
  border-radius: 100%;
  padding: 0 !important;
}

.navbar-mobile-list a:first-child{
  margin-top: 3rem;
}
.navbar-mobile .navbar-mobile-list a img {
 width: 20px;
 height: 20px;
 padding: 30px 30px 25px 0;
}

.out{
  font-size: 2rem !important;
  margin-top: auto;
  margin-left: auto;
  margin-right: 20px;
}

.fa-xmark {
  font-size: 3rem;
  z-index: 11;
}

.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Black transparent background */
  z-index: 9; /* Place it below the modal */
}

.show-overlay {
  display: block;
  transition: opacity 0.9s; /* Add transition for opacity property */

}

.messagerie{
  position: absolute;
  top: 5px;
  right: 15px;
  left: auto;
}

.messagerie img{
  width: 30px;
  height: 30px;
}
.scolarite{
  display: flex;
  flex-direction: column;
  font-weight: 500;
}

.scolarite p{
  padding-left: 1.2rem;
  font-size: 1rem;
  margin: 0 0 10px;
  color: black;

}
.scolarite a{
  padding-bottom: 0 !important;
  margin-bottom: 20px;
  color: rgba(0, 0, 0, .8) !important;
font-size: .85rem !important;
font-weight: bold;
margin-left: 10px;
border: none !important;
}


.scolarite:last-child{
  margin-left: 0;
  margin-bottom: 10px;
}


.desk_nav{
  display: none;
}

.docu{
margin-bottom: 2rem !important;}
.tets{
  display: none;
}

footer{
  display: none;
}
@media (min-width:900px){

  .profil_img{
    width:45px !important;
    height:45px !important;
  }
  .hello{
    padding: 0;
    margin-bottom: 0;
    margin-top: 20px;
    font-size: 5rem;
    font-weight: normal;
    }

  
    
    .title_page{
      font-size: 2.5rem;
      font-weight: normal;
      padding: 0 15px ;
    font-weight: normal;
    margin: 0;
    padding: 0;


    }
  
.content {
   display: grid; 

   grid-template-rows: 4rem auto 45px;
   grid-template-columns: 16rem auto 1fr 1fr;
   position: relative;
   gap: 3px;
   height: 100%;
   
}
  
#side_bar {

   background-color: #DADADA; 
   grid-row-start: 1;
   grid-column-start: 1;
   grid-row-end: 4;
   grid-column-end: 2;
position: fixed;   
height: 100%;
width: auto;
padding:  0 3rem;;


  
}

.desk_nav{  
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 30px auto;
  background-color: rgba(225,225,225, .7);


}

.docs{
    margin-right: auto;
}

.out{
margin: 0;
font-size: 2rem;
}

nav a{
  padding: 10px;
}

nav a img{
  width: 35px !important;
  height: 35px !important;
}

#main{

margin-top: 80px !important;
   width: 80%;
   margin: auto;
   
   
}

.navbar-mobile{
  display: none;
}
.angry-grid{
display: none;

 
}



        /* Style du conteneur du menu */
        .menu-container {
          position: relative;
          display: inline-block;
      }

      /* Style du bouton déclencheur du menu */
      .menu-btn {
      
          cursor: pointer;
      }

      /* Style du menu déroulant caché par défaut */
      .menu-items {
          display: none;
          position: absolute;
          list-style: none;
          margin: 0;
         
      }

      ul{
        list-style-type: none;
        margin: 0;
        padding: 0;
        width: 100%;
      }

   
      /* Style des liens du menu et activation au survol */
      .menu-container:hover .menu-items {
          display: block;
          /* background-color: rgba(225,225,225, .7);
          padding: 10px; */
      }

      .menu-items a {
          text-decoration: none;
          color: #333;
          display: block;
          padding: 10px 0 0;
      }
      
     
      * {
        -ms-overflow-style: none;
        scrollbar-width: none;
      }
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .menu-items {
        background-color: white;
        width: 200px;
        padding: 5px;
      }
      .angry-grid-desk {
        display: grid; 
     
        grid-template-rows: 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        
        gap: 0px;
        height: 600px;
        gap: 12px;
        margin-bottom: 50px;

        
     }
       .angry-grid-desk div{
        border-radius: 22px;
       }
     .angry-grid-desk #item-0 {
     background-image: url(mmi.jpg);
     background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

        grid-row-start: 1;
        grid-column-start: 5;
     
        grid-row-end: 2;
        grid-column-end: 8;
        
     }
     .angry-grid-desk #item-1 {
     
        background-color: #3B3B3D; 
        grid-row-start: 2;
        grid-column-start: 1;
     
        grid-row-end: 4;
        grid-column-end: 3;

        color: white;

        padding-left: 20px;
        
     }

     .angry-grid-desk #item-1 h2 {
      color: white;
      font-size: 2rem;
      font-family: 'Familjen Grotesk', sans-serif;
      margin: 0;
      /* margin-left: 20px; */
     }

     .angry-grid-desk #item-1 p {
      color: white;
      font-size: .8rem;
      /* margin-left: 20px; */
     }

     .docs_ouverts {
      display: flex;
      flex-direction: column;
      /* margin-left: 20px; */
      margin-top: 40px;
      text-decoration: underline 0.5px white solid;
  
     }

     .docs_ouverts a {
        color: white;
     }

     .angry-grid-desk #item-2 {
     
        background-color: #F6765B; 
        grid-row-start: 2;
        grid-column-start: 3;
     
        grid-row-end: 4;
        grid-column-end: 5;
        
     }

    .angry-grid-desk #item-2 h2 {
      font-size: 2rem;
      font-family: 'Familjen Grotesk', sans-serif;
      margin: 0;
      margin-left: 20px;
      margin-top: 15px;
     }

     .angry-grid-desk #item-2 .countdown {
      margin-left: 20px;
      margin-top: 20px;
     }


     .angry-grid-desk #item-3 {
     
        background-color: #D2E5E3; 
        grid-row-start: 2;
        grid-column-start: 5;
     
        grid-row-end: 4;
        grid-column-end: 8;
        
     }

     .angry-grid-desk #item-3  h2 {

      font-family: 'Familjen Grotesk', sans-serif;
      font-size: 2.5rem;
      margin: 0;
      margin-left: 20px;
      color: #393F42;
 
      }

      .angry-grid-desk #item-3  p {
        margin-left: 20px;
        color: #393F42;
      }

      .angry-grid-desk #item-3 .date {
        font-size: .8rem;
      }

      .menu_cantine {
        margin-top: 30px;
        
      } 

     .angry-grid-desk #item-4 {
     
        background-color: #D8E898; 
        grid-row-start: 1;
        grid-column-start: 1;
        height: 340px;
        grid-row-end: 2;
        grid-column-end: 5;

        display: flex;
        flex-direction: column;
        
     }

     .angry-grid-desk #item-4  h2 {

     font-family: 'Familjen Grotesk', sans-serif;
     font-size: 2.5rem;
     margin: 0;
     margin-left: 20px;
     color: #393F42;

     }

     .infos_abs {
      margin-top: 170px;
      margin-left: 20px;
      margin-right: 25px;
      font-size: 1.5rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
     }

     .angry-grid-desk .malus {
      font-size: 1rem;
      border: 1px solid black;
      padding: 2px 5px 2px 5px;
      border-radius: 8px;
      color: #00760C;
     }


     footer{
      background-color: #1D1D1D;
      color:white;
      display: flex;
      justify-content: flex-end;
      gap: 40px;
      
      padding: 40px 40px 0;
      flex-wrap: wrap
    }
    
    footer p{
      margin: 0;
    }
    
    footer h3{
      margin: 0;
      font-weight: normal;
    }
    footer a{
      color: white;
    }
    
    footer ul{
      padding-left: 7px;
      color: #A8B0B5;
    
      list-style: disc;
    }
    
    footer ul li a{
      color: #A8B0B5;
      font-size: .9rem;
    
    }
    
    footer .menu a{
      color: #A8B0B5;
    
    }
    
    .footer_title{
      color: #A8B0B5;
    
    }
    .allrights{
      width: 100%;
    }
    
    .lieu p{
      color: #A8B0B5;
    
    
    }
    
}




/* prof */



.angry-grid-prof {
  display: grid; 
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  height: 500px;
  gap: 12px;
  padding: 0 15px;

}

.box-item {
  width: 100%;
  height: 100%;
  border-radius: 22px;
}

#box-1 {
  background-color: #F6765B; 
  grid-row: 1 / span 2;
  grid-column: 1 / span 2;
}

#box-1 h2 {
  font-size: 1.2rem;
  font-family: 'Familjen Grotesk', sans-serif;
  margin: 0;
  margin-left: 10px;
}

#box-1 p {
  margin-left: 10px;
  font-size: 1rem;
}


#box-2 {
  grid-row: 1;
  grid-column: 3 / span 2;
 
}


#box-3 {
  background-color: #3B3B3D; 
  grid-row: 2;
  grid-column: 3 / span 2;

}

#box-3 h2 {
  font-size: 2rem;
  font-family: 'Familjen Grotesk', sans-serif;
  margin: 0;
  margin-left: 10px;
  margin-top: 15px;
  color: white;
}

#box-3 .countdown {
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 20px;
  margin-bottom: 20px;
  color: white;
 }

 #box-3 h3{
  margin: 0;
 }

#box-4 {
  background-image: url(mmi.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  grid-row: 3;
  grid-column: 1 / span 4;
  background-position: center;
  background-repeat: no-repeat;
}

.angry-grid-prof-desk{
  display: none;
  margin-bottom: 20px;
}

.nav-desk-prof img{
  width: 30px !important;
  height: 30px !important;
}

.nav-desk-prof {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-desk-prof a:nth-child(2){
  margin-right: auto;
}
.nav-desk-prof a:nth-child(4){
font-size: 2rem;
}

.nav-desk-prof a:nth-child(5){
  font-size: 2rem;
  }


@media(min-width:900px){
  .nav-desk-prof img{
    width: 40px !important;
    height: 40px !important;
  }
  

  h2{
    /* margin-left: 20px !important; */
  }

  #box-3 h2 {
    
    margin-left: 20px;
    
  }

  #box-1 p {
    margin-left: 20px;
  }

  #box-3 h2 {
  
    margin-left: 20px;
   
  }
  .nav-desk-prof{
    display: flex;
    background-color: rgba(225,225,225, .7);
    border-radius: 20px;
    width: 90%;
    margin: 30px auto;

    display: flex;
    align-items: center;
  }

  #box-3 .countdown {
    margin-left: 20px;
    margin-right: 20px;
   
   }

  .nav-desk-prof iconify-icon {
    font-size: 2rem;
  }


  .nav-desk-prof a:nth-child(2){
margin-right: auto;
  }

.angry-grid-prof{
  display: none;
  margin-bottom: 20px;
}

.angry-grid-prof-desk {
  display: grid; 
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  
  gap: 0px;
  height: 400px;
  gap: 12px;
}

.angry-grid-prof-desk div{
  border-radius: 22px;
}

.angry-grid-prof-desk #box-0 {
  background-image: url(prof.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;


  grid-row-start: 1;
  grid-column-start: 1;
  grid-row-end: 3;
  grid-column-end: 3;
}

.angry-grid-prof-desk #box-1 {
  background-color: #F6765B; 
  grid-row-start: 1;
  grid-column-start: 3;
  grid-row-end: 3;
  grid-column-end: 5;
}

.angry-grid-prof-desk #box-2 {

  background-color: #D596A7; 
  grid-row-start: 1;
  grid-column-start: 5;

  grid-row-end: 2;
  grid-column-end: 7;
  border-radius: 22px;

  
}
.angry-grid-prof-desk #box-3 {

  background-color: #3B3B3D; 
  color: white;
  grid-row-start: 2;
  grid-column-start: 5;

  grid-row-end: 3;
  grid-column-end: 7;
  
}

}




/* admin */

.angry-grid-admin{
      margin: 0 auto;

  display: grid; 

  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr;
  
  gap: 0px;
  height: 400px;
gap: 12px;
  
}
 
.angry-grid-admin div{
  border-radius: 22px;
}
#adm-box-0 {

  background-color: #CDE66A; 
  grid-row-start: 1;
  grid-column-start: 1;

  grid-row-end: 2;
  grid-column-end: 2;
  padding: 50px;
  
}

#adm-box-1 a{
  color: white ;

}
#adm-box-0 a, #adm-box-1 a{
  font-size: 3rem;

}


#adm-box-1 {

  background-color: #3B3B3D; 
  color: white;
  grid-row-start: 2;
  grid-column-start: 1;

  grid-row-end: 3;
  grid-column-end: 2;
  padding: 50px;
  
}

.angry-grid-admin-desk {
  display: none;
}

@media(min-width:900px){
  .nav-admin-desk{
   
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 30px auto;
      background-color: rgba(225,225,225, .7);
      width: 90%;
      border-radius: 20px;
 }

  .nav-admin-desk a:nth-child(4){
margin-left: auto;
  }
  .angry-grid-admin{
    display: none;
  }
  .angry-grid-admin-desk {
    width: 80%;
    margin: 0 auto;
    display: grid; 
 
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    
    gap: 0px;
    height: 400px;
    gap: 12px;
    
 }
   
 .angry-grid-admin-desk div{
  border-radius: 22px;
 }
 #adm-box-0{
 
    background-color: #3B3B3D; 
    color: whites;
    grid-row-start: 1;
    grid-column-start: 1;
 
    grid-row-end: 2;
    grid-column-end: 2;
    
 }
 #adm-box-1{
 
    background-color: #CDE66A; 
    grid-row-start: 1;
    grid-column-start: 2;
 
    grid-row-end: 2;
    grid-column-end: 4;
    
 }

 #adm-box-0 a{
  color: white ;

}

#adm-box-1 a{
  color: black ;

}


}