/*Developpé par: BOUSAHLA Yacine, BENDIDA Sofiane, TOUMI Rachid*/
body{
    background-color: #EFF9FF;/*#800000;/*#1D4851;/*#8EA2C6;*/
}

/* ---------------------------------------------
---------------------- DEBUT -------------------
        style pour fichire index.htm 
------------------------------------------------*/
h1,h2,h4,h5,h6,h3 {
text-align:center;
color:#21618c;
/*font-style: italic;*/
margin: 1px;
font-variant: small-caps;
}

.entete{
    color: white;
    
    padding: 14px 16px;
    margin-right: 0px;
    text-decoration:none;
    font-variant: small-caps;
}

a.gg{
 background-color: #7fcbfe; 
 border-radius: 15px;
 padding: 8px 10px;
}
#conteneur{
	display: flex;
	flex-direction: column;
	flex-wrap: wrap; /* nowrap; wrap; wrap-reverse (rester sure la ligne; passer à la ligne-manque de place-; passe à la ligne par ordre inverse) */
	/*align-items: center;*/
	/*justify-content: center;*/
	min-height: 100vh;/*100vh = 100% viewport height.*/
        width: 99%;
        margin: auto;
        border: 1px solid #333;
}
.element{
	/*border:2px solid green;*/
	color:white;
	background-color:white;/*#333;*/
       
        
}
.element:nth-child(1){ /* Premier div  */
    flex: 0 0 auto;
    background-color: #333;/*#EFF9FF;*/
    padding: 10px 20px 5px 10px;
    /*height: 30px;*/
    
}
.element:nth-child(2) /* Deuxième div  */
{
    background-color: #DFF2FF;
    padding-top: 5px;
    
}

.element:nth-child(3) /* Troisième div  */
{
    background-color: #EFF9FF;
    flex: 1;/*pour que ce div prend tout l'espace qui reste, travail avec min-height: 100vh*/
    /*text-align: center;*/
}
.element:nth-child(4) /* Quatrième div  */
{
    background-color: #c6d7e2;
    
}
.element:nth-child(5) /* Cinquième div  */
{
    background-color: #333;
    padding-top: 1px;
}
/*----------------------------------------------
--------------Fin style index.htm---------------
-----------------------------------------------*/
input{
 /*cursor:pointer;*/
 color:#0970b1;
 background-color:#FEFEFE;/*#FBFCFA;*/
 /*width: 200px;*/
 /*margin-top:20%;*/
 /*left:50%;*/
}
hr{
    width: 50%;
    color: #CC0000;
}
form{
    /*border: 1px solid red;*/
    margin: auto;
    width: 60%;
}
fieldset{
    border-left: 10px solid #333;
    border-right: 10px solid #333;
    /*text-align: center;*/
}

/*p{
    
    font-size: 16px;
    color:black;
    margin-bottom: 2px;
}*/

#img_p01{
    float: right;
    width: 80px;
    height: 80px;
    
}
#img_p02{
    float: left;
    width: 80px;
    height: 80px;
}
.one{
   color:red; 
}
.two{
   color:black; 
}
.tree{
    font-size: medium;
    background-color: #003366;
}
.four{
    color:#800000;
    font-style: oblique;
    font-weight: bolder;
}

.logout{
    
    /*color:red;*/
    text-align: right;
    /*padding-right: 4px;*/
    margin-left: 69%;
    /*font-variant: small-caps;*/
    width: 30%;
    
}

p{
    color:#212f3d;
    margin-bottom: 2px;
    
}
.hautbas{
    /*color:black; 
    text-decoration: underline;*/
    color:white!important; 
    font-style: normal;
}
.btn{
    background-color: #eafaf1;/*#5cb85c;*/
    /*color:#fff;*/
    /*border: 1px solid  #138d75 ;/*#4cae4c;*/
    border-radius: 5px;
    
    
}
.felicite{
    color:#800000;
    font-style: oblique;
    font-weight: bolder;
    font-size: large;
    width: 30%;
    text-align: center;
    margin: 0 auto;
}