:root {
	--pageBackGroundColor:#eee;     /* fond de la page */
	--elementsBackGroundColor:#eee; /* fond de la page */
	--headerBackGroundColor:#0c6588; /* fond de l'entête (header) + (image de fond) */
	--menuBackGroundColor:#e2f7ff   ;/* fond du menu */
	--mainBackGroundColor:#fff     ; /* fond du contenu principal */
	--footerBackGroundColor:#333   ; /* fond du footer */
	--titleColor:#333              ; /* couleur des titres */
	--textColor:#555               ; /* couleur des textes */
    --textHeaderColor:#e2f7ff      ; /* couleur des textes de l'entête */
    --textFooterColor:#ddd          ;/* couleur des textes du footer */
    --linkButtonColor:#0c6588   ;    /* couleur des liens/boutton */
    --hoverLinkButtonColor:#000  ;   /* couleur des liens/boutton au survol */
    --linkFooterColor:#eee        ;  /* couleur des liens du footer */
    
}


.HeadNav{
        color : #39819C;
        background-color : #E2F7FF;
}
/*suppression de la marge native du ul*/
.HeadNav ul{
    padding-left:0;
}
.HeadNav  li{
    list-style:none;
    
}


.NavPrinc{
    display:flex;
}


.NavPrinc > li{
    width : 25%;
    text-align : center;
    padding : 1em ;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
        cursor:pointer;

}
/*espacement entre le favicon et le titre*/
.NavPrinc i{
    margin-right : 1em;
}


.NavSec{
    background-color:#fff;
    position:absolute;
    /*caché avant passage de la souris*/
    display:none;
    
    cursor:default;
    box-shadow:0 0px 5px 5px #ddd;

}
.NavSec ul{
    display : flex;
    flex-direction: column;
    align-items: flex-start;
    padding:1em;
}
.NavTrois h3{
    color : #000;
}

.NavTrois li a{
    text-decoration:none;
    color:var(--headerBackGroundColor);

}
/*gestion des catégories*/
.Ordi, .Obj, .Periph, .Tel
{
    top:100%;
}

.Ordi{
    width : 300%;
    left : 0;
}

.Ordi ul{
    width : 33%;
}

.Periph{
    width : 400%;
    left : -100%;
}
.Periph ul{
    width : 25%;
}
.Tel{
    width : 200%;
    left : 0%;
}
.Tel ul{
    width : 50%;
}
.Obj{
    width : 300%;
    left : -200%;
}
.Obj ul{
    width : 33%;
}


/*gestion du hover*/
.NavPrinc li:hover  .NavSec{
    display:flex;

}

.NavPrinc li:hover{
    color:#000;
    background-color:#fff;
}