body {
    font: normal/ Arial, Helvetica, sans-serif;
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    background-color: rgb(221, 221, 221);


}
H1 {
    font-size: x-large;
    color: #2C0CCC;
    text-align: center;
}
H2 {
    font-size: larger;
}

 .MOT-CLE {
      font-weight: bold;
      color: rgb(0, 0, 153);
      font-style: italic;

      }
     .new {
      font-weight: bold;
      color: rgb(200,0, 0);
      font-style: italic;

      }
  .liste1 {
         list-style-type: disc;


  }
  .liste1 {
         list-style-type: disc;
      list-style-image: url(../images/coche.gif);

  }
  section#absences {
    width: 60%;
    height : 600px;
    float: left;
    background-color: #D1D1FF;
    color: #000000;
    font-weight: bold ;
    font-size: 140%;
    /*border-style: solid; */

   padding:10px;
   text-align: center;
   /*border-right-color: #003399;
   border-right-style: groove;*/




}
  aside {

    width: 45%;
    float: right;
    padding:10px;
    color: #FFFFFF;  font-weight: bold ;

}
.image2{
    width: 100%;
    height: 0px;
    padding-top: 75%;
    box-shadow: 0px 0px 10px #777;
    background-color: #EDEDED;
    background-size: contain;
    animation: fondu 30S step-start infinite both;


}
.menu {
    display: flex;                /* Transformation en flexbox */
    padding:0;                    /* Suppression des marges internes */
    background-color: rgb(189, 189, 189);         /* Ajout de la couleur d'arrière-plan */
    /*justify-content: space-around; Alignements des liens dans le menu */
}
.menu li {
    list-style-type: none ;       /* Suppression des puces */

}
.menu a {
    display:block;                /* Transformation en block */
    min-width: 120px;             /* Largeur minimale des liens */

    margin: 0.5rem;               /* Marges externes */
    padding: 0.4rem 0;            /* Marges internes */
    text-align: center;           /* Centrage du texte */
    background-color: rgb(122, 122, 122);      /* Arrière-plan */
    color: #fff;                  /* Couleur du texte */
    text-decoration: none;        /* Suppression du soulignement */
    border: 1px solid #fff;       /* Ajout d'une bordure */
    border-radius: 4px;           /* Arrondis des bordures */
    border-color: rgb(122, 122, 122) ;
    transition: all 1s ;          /* Ajout des effets de transition */
}
.menu a.actif {
    background-color: #000099 ;
    color: #FFFFFF ;
    border-color: #1ABC9C ;
}
.menu a:hover,
.menu a:hover.actif{
    background-color: #99CCFF;
    color: #ffe843;
    border-color: #ffe843;
}

.image2:hover {
    animation-play-state: paused;
}

@keyframes fondu{
    0%{background-image: url(../images/gestrpadmin1.PNG);}
    20%{background-image: url(../images/gestrpadmin2.PNG);}
    40%{background-image:url(../images/gestrpadmin3.PNG);}
    60%{background-image: url(../images/console.PNG);}
    80%{background-image: url(../images/console2.PNG);}
   100%{background-image: url(../images/console3.PNG);}
}
footer {
      position: fixed;
      bottom: 0;
      right: 0;
      text-align: justify;
      font-style: italic

  }