body{
    width: 100%;
    height: 100vh;
    font-family: 'Didact Gothic', sans-serif;

}





a:link {
 color: #BC6F29;/*white*/
}

a:visited {
color:black;
}

h5,h6{
color:#FFFFFF;
}

.sous_titre
{
    color:#BC6F29;
    font-size:16px;
    
}

.sous_titre_gras
{
    color:#BC6F29;
    font-size:16px;
    font-weight:bolder;
    text-decoration:underline;
}

.sous_titre_small
{
    color: #BC6F29;
    font-size:14px;
    text-decoration:underline;
}

.lien_small
{
    color: #BC6F29;
    font-size:9px;
    text-decoration:underline;
}


.sous_titre_small_demande_connexion
{
    color:red;
    font-size:14px;
    text-decoration:underline;
}
.phonetique{
    
     color:#BC6F29;
    font-size:14px;
   
}
.sous_titre_small_blanc
{
    color:#FFFFFF;
    font-size:14px;
    background-color: #582E14;
}

.sous_titre_moyen_blanc
{
    color:#FFFFFF;
    font-size:18px;
    background-color: #582E14;
}


.sous_titre_moyen
{
    color:#BC6F29;
    font-size:20px;
    font-weight:bolder;
    text-decoration:underline;
}

.sous_titre_moyen_simple
{
    color:#BC6F29;
    font-size:17px;
    font-weight:bolder;
}
h3{
    color:#BC6F29;
    font-size:8px;
}

.text_moyen_noir{
    font-size:14px;
}


.banniere-EBantou{
 
    
    margin:0px;
  
    background-image: url("../image/moyen.png");
    background-position: center;
     height: 325px;
     width:100%;
  background-repeat: no-repeat;
  background-size: contain;
}


    .connexion{
    background-color:#030303;
    color:#BC6F29;
    

   

}


.connecte
{
    background-color:#582E14;
}
.connexion:hover{
   /* background-color:#582E14;*/

    
}

.footer{
    background-color:#030303;
    color:#FFFFFF;
}




.boutoncommencer:hover{
    background-color: #BC6F29;
    color:#030303;
}


.titre{
background-color: #030303;
color:#BC6F29;
    font-size:18px;

}

.boutoncommencer{
background-color: #030303;
padding: 0px;
color:#BC6F29;  
}

.select{
    background-color: #030303;
    width: 100px;
    padding: 10px; 
}

.navbar{
   background-color:#582E14;
   color:white;

 
}

small,.dropdown-toggle,.open.dropdown-toggle:active
{
   color:#FFFFFF;

}

.Lecture
{
     background-color:#582E14;
   
}

 /*.btn:focus,.btn:active { 
     outline: none; box-shadow: none; } */
.myButton {
	box-shadow: 0px 0px 0px 2px #e9ebf2;
	background:linear-gradient(to bottom, #582e14 5%, #d19771 100%);
	background-color:#582e14;
	border-radius:10px;
	border:1px solid #0a0a0a;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:19px;
	padding:12px 37px;
	text-decoration:none;
	text-shadow:0px 1px 0px #fafaff;
}
.myButton:hover {
	background:linear-gradient(to bottom, #d19771 5%, #582e14 100%);
	background-color:#d19771;
}
.myButton:active {
	position:relative;
	top:1px;
}




@media (max-width: 575px) {

    /*ici tu vas mettre tout le code qui doit être adapté très petits écrans */
   
 /*h4
{
     font-size: 120px;
}*/
  


}
    
    @media (min-width: 576px) and (max-width: 767px) {
    
    /*ici tu vas mettre tout le code qui doit être adapté aux petits écrans*/
/*h4
{
     font-size: 120px;
}*/

    
 
    
   

}


    
    @media (min-width: 768px) and (max-width: 991px) {
    
    /*ici tu vas mettre tout le code qui doit être adapté aux écrans de la taille moyenne du style tablette*/
    
 
    

    
    
   
    
    }
    
    @media (min-width: 992px) and (max-width: 1199px) {
    
    /*ici tu vas mettre tout le code qui doit être adapté aux écrans de la taille large */
    

    .banniere-EBantou{
  
  
    background-image: url("../image/grand.png");
    background-position: center;
     height: 350px;
     width:100%;
  background-repeat: no-repeat;
  background-size: cover;
}
    
    }
    
    @media (min-width: 1200px)  {
    
    /*enfin ici pour les écrans de taille très large*/
    

.banniere-EBantou{
  
  
    background-image: url("../image/banniere_large.png");
    background-position: center;
    
  background-repeat: no-repeat;
  background-size: cover;
}

    }