/* CSS Document */
:root 
{
    --couleur1: #339933;
    --couleur2: #AC0000;
    --couleur3: #ffffff;
    --couleur4: #333333;
    --couleur5: #777777;
    --couleur6: #1e2b79;
    --couleur7: #C9CACA; 
    --couleur8: #CC0000;
       
}

body
{
   background-color: var(--couleur1);
   margin:0px;
   font-family: Arial,Helvetica,sans-serif;    
}

header
{
    text-align: center;
    font-size: 250%;
    color: white;
    background-color: var(--couleur8);
}

.logo
{
    margin-top: 20px;
    margin-bottom: 20px;
    width: 30%;
    vertical-align: middle;
} 

nav
{
    background-color: var(--couleur2);
    border: 0px var(--couleur2) solid;
}

#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul 
{
        left: auto; 
        min-height: 0; 
}

#menu li:hover
{
    background-color: var(--couleur3);
}

#menu a:hover    
{
        color: var(--couleur5); 
        background: var(--couleur3); 
}
                                                                                                                                       
#menu, #menu ul     
{
        padding : 0; 
        width: 960px;
        float: center;
        list-style : none;        
}

#menu 
{
        background-color: var(--couleur2);
        border: 0px var(--couleur2) solid;
        font-family: Arial,Helvetica,sans-serif;
        font-size : 16px; 
        width: 934px;
        float: center;
        margin: auto;        
}

#menu a 
{
        display : block; 
        padding : 0; 
        background-color: var(--couleur2);        
        color : var(--couleur3); 
        text-decoration : none;         
}

#menu li     
{          
        display: inline-block;
        color: white;
}

#menu li ul
{ 
        position: absolute; 
        left: -999em;        
}


.menu2
{
      text-align: center;
}

#menu li ul li 
{
        border-top : 1px solid var(--couleur7);
        padding-left: 8px;      
}

nav li
{
    display: inline-block;
    color: white;  
    background-color: var(--couleur2);
    width: calc(100%/3);   
}

#menu li a
{
    display: inline-block;             
    color: white;
    text-decoration: none;
    padding-top: 8px;
    padding-bottom: 8px;
    width: 100%; 
}

section
{
    background-color: white;
    width: 935px;
    float: center;
    margin: auto;
    padding-left: 13px;
    padding-right: 12px;
    border: 0px var(--couleur1) solid;
    border-right-width: 0px;
    border-left-width: 0px;
}

section a
{
    color: var(--couleur6);
    text-decoration: none;
}

section a:hover
{
    color: var(--couleur6);
    text-decoration: none;
}                      

.titre
{
   color: var(--couleur6);
   font-size: 25px;
   margin-bottom: 10px;
   text-align: center;
   margin-top: 15px;
}

article
{
  font-size: 13px;
  margin: 0px;
}

.megatitre
{
   color: var(--couleur6);
   font-size: 30px;
   margin-top: 20px;    
   text-align: center;
   margin-bottom: 0px;
}

footer
{
    text-align: center;
    color: var(--couleur3);
    margin: 6px;
    padding: 6px;
}

.on
{
    text-align: center;
    padding-left: 60px;
    margin-bottom: 20px;
}

.off
{
    text-align: center;
    padding-right: 60px;
    margin-bottom: 20px;
}

.colonne1
{
    border-style: solid;
    border-color: var(--couleur1);
    border-right-width: 1px;
    border-top-width: 0px;
    border-bottom-width: 0px;
    padding-left: 30px; 
    padding-right: 30px;
}

.colonne2
{
    border-style: solid;
    border-color: var(--couleur1);
    border-left-width: 1px;
    border-top-width: 0px;
    border-bottom-width: 0px;
}

.bouton
{
    width: 100px;
    height: 40px;
    font-size: 15px;
    margin-top: 10px;
    margin-bottom: 20px;
}

@media (max-width: 10px) {
.bouton
{
    width: 200px;
    height: 80px;
    font-size: 15px;
    margin-top: 10px;
    margin-bottom: 20px;
}
}

.ligne1
{
    border-style: solid;
    border-color: var(--couleur1);
    border-right-width: 1px;
    border-top-width: 0px;
    border-bottom-width: 2px;
    padding: 20px; 
    font-size: 20px;
}

.anim1
{
    border-style: solid;
    border-color: var(--couleur1);
    border-right-width: 0px;
    border-top-width: 0px;
    border-bottom-width: 0px;
    padding-left: 30px; 
    padding-right: 30px;
    padding-top: 20px;
    padding-bottom: 10px;
    text-align: center;
}

.anim
{    
    padding-left: 30px; 
    padding-right: 30px;
    padding-top: 20px;
    padding-bottom: 10px;
    text-align: center;
}

.connecte
{
    color: green;
    font-weight: bold;
}

.deconnecte
{
    color: red;
    font-weight: bold;
}

.progActive
{
    color: green;     
    text-align: center;
    margin-bottom: 20px;
    font-size: 18px;
}

.progDesactive
{
    color: red;
    text-align: center;
    margin-bottom: 20px;
    font-size: 18px;
}

.onProg
{
    text-align: center;
    padding-left: 60px;
}

.offProg
{
    text-align: center;
    padding-right: 60px;
}