html{
	scroll-behavior: smooth;
}

*{
    padding: 0;
    margin: 0;
    font-family: 'roboto', 'Arial Narrow', Arial, sans-serif;

}


#az{

  padding-left: 10px;

}

#cont1{

    padding-top: 80px;
    
}

.cont1{

    padding-top: 80px;
    
}

#cont2{

    padding-top: 40px;
    
}

#cont3{

    padding-top: 60px;
    
}

#cont4{
      
    margin-top: 50px;
    height: 400px;
    
}

#container_img_bas{
    
 margin-top: 60px;
    
}

.not_seen{  
    background-color: #f2f2f2; 
    }

span{
        color: red !important; 
         font-weight: bold; 
    }

.bw{
    color: green;
}


footer{
    
    padding-top: 10px;
    background-color: rgb(58, 54, 54);
    height:auto;
    width: auto;
    color: rgb(207, 185, 185);

}

footer div{

      padding-top: 5px;
    padding-left: 5px;
    text-align: center;
}

.color{
    background-color: red;
}

#coloradmin{

    background-color: rgb(3, 1, 19);
  
    width: 100%;
}

.media1{
    
    margin-top: 20px;
    padding-left: 10px;
}


/* utilisateur en ligne*/
.point{

    border-style: dotted;
    text-align: center;

}


/*les couleurs de fond et de contenu*/
.ll{

    background-color: aqua;
}
.jaune{
    background-color: yellow;
}

.bordeau{
    background-color: brown;
}

.purple{
    background-color: purple;
}

.bleu{
    background-color:blue;
}

.gris{
    background-color:grey;
}

.vert{
    background-color:green;
}

.rose{
    background-color:pink;
}

.camele{
    background-color:burlywood;
}

.khaki{
    background-color:khaki;
}

.sienna{
    background-color:sienna;
}

.orangerouge{
    background-color:orangered;
}

.orange{
    background-color:orange;
}

.olive{
    background-color:olive;
}

.aquamarine{
    background-color:aquamarine;
}

.bleuroyal{
    background-color:royalblue;
}

.bleunuit{
    background-color:rgb(9, 50, 70);
}

.silver{
    background-color:silver;
}

.beige{
    background-color:beige;
}

.noire{
    background-color:black;
}

.blanche{
    background-color:white;
}

#jaune{
    color: yellow;
}

#bordeau{
    color: brown;
}

#purple{
    color: purple;
}

#bleu{
    color:blue;
}

#gris{
    color:grey;
}

#vert{
    color:green;
}

#rose{
    color:pink;
}

#camele{
    color:burlywood;
}

#sienna{
    color:sienna;
}

#khaki{
    color:khaki;
}

#orangerouge{
    color:orangered;
}

#orange{
    color:orange;
}

#olive{
    color:olive;
}

#aquamarine{
    color:aquamarine;
}

#bleuroyal{
    color:royalblue;
}

#bleunuit{
    color:rgb(9, 50, 70);
}

#silver{
    color:silver;
}

#beige{
    color:beige;
}

#noire{
    color:black;
}

#blanche{
    color:white;
}

.j{
    color: yellow;
}

.champs{

 height: 50px;

}

.champs-cosulter{

    height: 40px;
}


/*  traitement page accueil   */

.accueil-image{

width: 100%;
height: 100vh;

}

.accueil-couleur{

    width: 100%;
    height: 100vh;
    background-color: rgba(12, 12, 131, 0.8);
    justify-content: center;
 
}

.justifier-element{

    text-align: center;

}

#justifier-element-rigth{

    text-align: right;

}

.accueil-couleur{

    display: flex;
    justify-content: center;
    align-items: center;
}

.div-logo-ecole{

 overflow: hidden;
 display: flex;
 justify-content: center;
 align-items: center;
}

.marge-gauche{

    margin-left: 100px;
}

.logo-ecole{
    
    width: 120px;
    height: 120px;
    opacity: 0.5;
    /*border-radius: 45px 45px;*/
}

.reduire-menu{

   width: 200px;
  
}

.centrer-menu{

    display: flex;
    justify-content: center;
    align-items: center;
 }

 /*page-communiqué-->*/

.separateur-acceuil-communique{

    padding-top: 40px;
   
}

 .centrer-element{

    text-align: center;
    
}

.image-communique{

    width: 120px;
    height: 120px;

}

.centrer-image-communique{

    display: flex;
 justify-content: center;
 align-items: center;
}

.centre-text{

    width: 300px;
   word-spacing: 5px;
   line-height: 50px;
    text-align: center;
    
}

/*appropos-->*/

.centre-text-apropos{

    word-spacing: 5px;
    line-height: 30px;
    text-align: center; 

}

.centrer-image-apropos{

 display: flex;
 justify-content: center;
 align-items: center;
}

/* fonctionnement*/



.fonctionnement-couleur{

    width: 100%;
    height: 100vh;
    background-color: rgba(12, 12, 131, 0.8);
}

.centrer-titre-fonctionnement{

    text-align: center;
}

/* fonctionnement*/

.bouton-menu{

    height: 100px;
    width: 200px;
    border-radius: 10px 10px;
    text-align: center;
}

.centrer-qr-code{

 display: flex;
 justify-content: center;
 align-items: center;

}

#propre{

    border-left: none;
    border-top: none;
    border-right: none;
    border-bottom: none;
    outline: none;
    background-color: transparent;
    font-weight: bolder;
    font-size: larger;
    font-style: oblique;
    color: grey;

}