:root {
        --text: #333333;
--links: #0088CC;
--titles: #001A70;
--page-background: #F5F5F5;
--highlight: #EC643C;
--boxes-background: #FFFFFF;
--boxes-border: #E5E5E5;
--section-titles: #F5F5F5;
--section-titles-background: #001A70;
--header-background: #001A70;
--header-links: #000000;
--footer-background: #FFFFFF;
--footer-links: #0088CC;
    }
    
body {
    margin: 0px;
}

.component-header p {
    margin: 0px;
}

.component-header svg {
    flex-shrink: 0;
}

.header {
    padding: 20px 40px;
    display: flex;
    gap: 30px;
    justify-content: space-between;
    border-bottom: 1px solid #dedede;
}

.header-left {
    display: flex;
    align-items: center;
    justify-content: start;
}

.branding {
    display: flex;
    align-items: center;
}

.menu1 {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: 700;
    font-size: 14px;
    line-height: 26px;
}

#menu img {
    float: left;
}

.image1 {
    filter: brightness(0) saturate(100%) invert(6%) sepia(71%) saturate(6011%) hue-rotate(228deg) brightness(110%) contrast(104%);
    ;
}

/* le CSS au dessus correspond au bouton Menu qui utilise Angular JS et les ng-init et ng-click pour ouvrir le menu principal */
ul7,
li7 {
    padding: 0;
    margin: 0;
}

#menu {
    position: fixed;
    z-index: 20;
    margin-top: 40px;
    margin-left: -100px;
    border: 1px solid #dedede;
}

.parent-menu {
    background-color: #F8F7F7;
    min-width: 200px;
    float: left;
}

#menu ul7 {
    list-style-type: none;
}

#menu ul7 li7 a {
    padding: 30px 20px;
    display: block;
    color: #001a70;
    text-decoration: none;
    font-family: Arial;
}

#menu ul7 li7 a:hover {
    background-color: #DEDEDE;
    color: #001a70;
}

/* Le CSS au dessus definit la forme et les couleurs du menu principal avec les categories de données*/
#menu ul7 li7:hover>ul7 {
    left: 280px;
}

ul7.submenu {
    height: auto;
}

#menu ul7 li7>ul7 {
    position: absolute;
    background-color: #F8F7F7;
    top: 0;
    left: -200px;
    min-width: 200px;
    z-index: -1;
    height: 42.5%;
    -webkit-transition: left 200ms ease-in;
    -moz-transition: left 200ms ease-in;
    -ms-transition: left 200ms ease-in;
    transition: left 200ms ease-in;
    right: 0;
}

#menu ul7 li7>ul7 li7 a:hover {
    color: #000;
}

/* Le CSS du dessus cree le sub menu qui s'ouvre lors d'un hover, pour les jeux de données, les visualisations et les rapports*/
.align1 {
    margin-top: 82px;
}

.align2 {
    margin-top: 165px;
}

.align3 {
    margin-top: 247px;
}

.align4 {
    margin-top: 330px;
}

.align5 {
    margin-top: 250px;
}

#menu ul7 li7>ul7.align1 {
    height: 28%;
}

#menu ul7 li7>ul7.align2 {
    height: 28%;
}

#menu ul7 li7>ul7.align3 {
    height: 28%;
}

#menu ul7 li7>ul7.align4 {
    height: 28%;
}

.separation {
    width: 1px;
    height: 23px;
    background: #bcbcbc;
    margin-left: 25px;
    margin-right: 25px;
}

.texte-contextuel {
    font-size: 20px;
    line-height: 26px;
    color: #001a70;
}

.bloc-lien {
    display: flex;
    gap: 30px;
    align-items: center;
}

.lien-with-icon {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    line-height: 16px;
    color: #333333;
    cursor: pointer;
}

.bouton {
    display: flex;
    border: none;
    background: #001a70;
    align-items: center;
    padding: 11px 24px;
    gap: 5px;
    cursor: pointer;
    font-weight: 700;
    font-size: 14px;
    line-height: 26px;
    color: white;
}

.sous-header {
    display: flex;
    padding: 0px 40px 20px 40px;
    gap: 40px;
    border-bottom: 1px solid #dedede;
}

.rubrique {
    font-size: 14px;
    line-height: 16px;
    padding-top: 20px;
    color: #001a70;
    cursor: pointer;
    margin: auto;
}

.rubrique-selected {
    padding-top: 16px;
    border-top: 4px solid #001a70;
}

#iconMenu {
    cursor: pointer;
    display: block;
}

/* */
/* */
/* */
/* NOTE Mobile */
/* */
/* */
/* */

.mobile {
    display: none;
}

.bloc-icon-profil {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

#iconClose {
    cursor: pointer;
    display: none;
}

.contentHamburger {
    padding: 50px 20px 25px 20px;
    display: none;
    gap: 100px;
    flex: auto;
    justify-content: space-between;
    flex-direction: column;
}

.bloc-lien-hamburger {
    display: flex;
    font-size: 26px;
    line-height: 36px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    color: #333333;
}

.bloc-footer-hamburger {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.lien-with-icon-hamburger {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 16px;
    line-height: 26px;
    color: #333333;
    cursor: pointer;
}

.hamburger-open {
    position: absolute;
    height: 100%;
    width: 100%;
    background: white;
}

@media (max-width: 992px) {
    .desktop {
        display: none;
    }

    .mobile {
        display: flex;
        flex-direction: column;
    }

    .mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px;
        gap: 50px;
        background: #ffffff;
        border-bottom: 1px solid #dedede;
    }
}