@import url("site-variables.css");
/*€──────────────────────────────────────────────────────────────────────────────────────────────*/
/*€--- Fichier site-header.css ===>                                                              */
/*€--- ===> STYLE appliqué sur tous les fichiers HTML & PHP ( dossier => VIEW )                  */
/*€──────────────────────────────────────────────────────────────────────────────────────────────*/


/*:___ DEBUT - 01 ______________________________________________________________________________:*/

/*?--- HEADER */
header {
    position: fixed;
    width: 100%;
    height: 90px;
    background-color: var(--clr_00);
    z-index: 100;
}

/*?__________________________________*/

/*?--- BULLE + LOGO situés en haut gauche */
#iBulleLogo .bulleLogo {
    position: fixed;
    display: block;
    width: 370px;
    top: 0;
    left: -2px;
    transform : rotateY(180deg);
    z-index: 120;
}

#iBulleLogo .logo {
    position: fixed;
    display: block;
    width: 270px;
    top: 40px;
    left: 14px;
    transform : rotate(-22deg);
    z-index: 140;
}

/*?__________________________________*/

/*?--- BARRE DE NAVIGATION */
#iContainerHeader {
    display: flex;
    justify-content: end;
    width: 100%;
    height: 60px;
    margin-top: 30px;
    padding-right: 80px;
    background-color: var(--clr_20);
    box-shadow: -2px 0px 10px 1px rgba(0, 0, 0, 0.4);
}

#iContainerHeader a {
    display:flex;
    justify-content:center;
    align-items:center;
    position: relative;
    width: 120px;
    font-size: 18px;
    font-weight: 400;
    color: var(--clr_11);
    cursor: pointer;
    transition: 0.4s;
    text-decoration: none;
}

#iContainerHeader a::after {
    content: "";
    position: absolute;
    width: 0;
    height: 4px;
    bottom: 0;
    left: 50%;
    background-color: var(--clr_10);
    transition: all .4s;
}

#iContainerHeader a:hover:after {
    width: 100%;
    left: 0;
    transition: all .4s;
}

#iContainerHeader .cActif::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 4px;
    bottom: 0;
    left: 0;
    background-color: var(--clr_11);
}

#iContainerHeader .cActif {
    cursor:default;
}

/*?__________________________________*/

/*?--- BOX HAUT - Vide => permet de caler le container suivant */
#iBoxHaut {
    width: 100%;
    height: 90px;
    background-color: transparent;
}
/*:________________ FIN - 01 ___________________________________________________________________:*/