@charset "UTF-8";

/* ===============================================================
   menu.css — menu principal (CSS pur, sans JavaScript)
   =============================================================== */

.menu-input-toggle {
    z-index: 1000;
    display: block;
    position: absolute;
    margin: -50px;
    visibility: hidden;
}

.menu-label-toggle {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
}

ul.menu {
    overflow: visible;
    white-space: nowrap;
    padding: 0;
    z-index: 1510;
    position: absolute;
    top: 0;
}

ul.menu li {
    list-style: none;
    background-color: #2b2b2b;
    margin: 0;
    position: relative;
    display: block;
    height: 30px;
    z-index: 1512;
    text-align: center;
    white-space: nowrap;
}

ul.menu li:hover > a {
    color: black;
    text-shadow: 1px 1px lightgrey;
}

/* Entrée active — marquée par le script de menu.html.
   Même traitement que le titre de rubrique (.breadcrum_menu) :
   texte coloré simple, sans filet ni gras.
   Les scripts inline des pages
   (document.getElementById("menu_xxx").style.color = "red")
   peuvent être supprimés. */
ul.menu li > a.active,
ul.menu li > a.active-parent,
ul.menu li > a[style*="red"] {
    color: #ff0000 !important;
    text-decoration: none;
    border-bottom: none;
    font-weight: normal !important;
}

/* ===============================================================
   Écrans 1024px et plus — menu horizontal, sous-menu au survol
   =============================================================== */

@media (min-width: 1024px) {

    #menu_container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 45px;
        padding-left: 80px;
    }

    .menu-label-toggle,
    .menu-input-toggle {
        display: none;
    }

    .menu,
    .menu ul,
    .menu li,
    .menu a {
        margin: 0;
        padding: 0;
        border: none;
        outline: none;
        font-variant: small-caps;
    }

    .menu li {
        position: relative;
        list-style: none;
        display: block;
        height: 40px;
        z-index: 1510;
        float: left;
        clear: none;
        width: 150px;
        text-align: center;
        overflow: visible;
        white-space: nowrap;
    }

    .menu li > a {
        display: block;
        padding: 0 14px;
        margin: 6px 0;
        line-height: 28px;
        text-decoration: none;
        text-align: center;
        border-left: 1px solid #FAFAFA;
        border-right: 1px solid #F0F0F0;
        font-family: Helvetica, Arial, sans-serif;
        font-weight: normal;
        font-size: 12px;
        color: white;
        transition: color .2s ease-in-out;
    }

    .menu ul {
        position: absolute;
        /* 40px = hauteur réelle du li parent, le sous-menu se place dessous */
        top: 40px;
        left: 0;
        opacity: 0;
        background: white;
        border-radius: 0 0 5px 5px;
        border-left: 1px solid #BBB;
        border-right: 1px solid #BBB;
        border-bottom: 1px solid #BBB;
        transition: opacity .5s ease .1s;
        z-index: 1502;
    }

    .menu li:hover > ul {
        opacity: 0.95;
    }

    .menu ul li {
        height: 0;
        overflow: hidden;
        padding: 0;
        clear: both;
        transition: height .5s ease .1s;
    }

    .menu li:hover > ul li {
        height: 30px;
        overflow: visible;
    }

    .menu ul li > a {
        font-size: 12px;
        font-style: normal;
        border: none;
    }

}

/* ===============================================================
   Écrans jusqu'à 1023px — menu déroulant derrière l'icône
   =============================================================== */

@media (max-width: 1023px) {

    #menu_container {
        position: fixed;
        top: 0;
        right: 0;
        height: 48px;
        width: 48px;
        z-index: 1503;
        background-image: url("/site/images/menu-icon.png");
        background-size: 36px;
        background-repeat: no-repeat;
        background-position: top right;
    }

    ul.menu,
    ul.menu ul,
    ul.menu li,
    ul.menu a {
        border: none;
        outline: none;
        font-variant: small-caps;
    }

    ul.menu {
        position: absolute;
        top: 40px;
        right: 0;
        width: 160px;
        display: inline-block;
        padding: 0;
        visibility: hidden;
        opacity: 0;
        border: 1px solid rgb(240, 240, 240);
        border-radius: 0 0 5px 5px;
        transition: opacity .5s ease .1s;
        z-index: 1502;
    }

    .menu-input-toggle + ul {
        display: none;
    }

    .menu-input-toggle:checked + ul {
        display: block;
        visibility: visible;
        opacity: 1;
        background-color: white;
        transition: opacity .5s ease .1s;
    }

    /* Réactive le clic sur TOUS les liens du menu ouvert,
       y compris ceux des sous-menus (petits-enfants du ul). */
    .menu-input-toggle:checked + ul a {
        pointer-events: auto;
    }

    ul.menu li {
        position: relative;
        width: 100%;
        /* hauteur libre : le line-height de 28px détermine la hauteur
           réelle, sinon les entrées se chevauchent */
        height: auto;
    }

    ul.menu li > a {
        display: block;
        pointer-events: none;
        background-color: white;
        padding: 0 20px;
        line-height: 28px;
        text-decoration: none;
        text-align: center;
        border-left: 1px solid #FAFAFA;
        border-right: 1px solid #F0F0F0;
        font-family: Helvetica, Arial, sans-serif;
        font-weight: normal;
        font-size: 12px;
        color: #4B4B4B;
        transition: color .2s ease-in-out;
    }

    ul.menu ul {
        position: relative;
        top: -17px;
        right: 162px;
        padding: 0;
        opacity: 0;
        background-color: white;
        border-radius: 0 0 5px 5px;
        transition: opacity .5s ease .1s;
        z-index: 1502;
    }

    .menu-input-toggle:checked + ul {
        opacity: 1;
    }

    ul.menu ul li {
        opacity: 1;
        transition: height .5s ease .1s;
    }

    ul.menu ul li > a {
        font-size: 12px;
        font-style: normal;
        border: none;
    }

}

/* Sous-menu du portfolio : jamais en rouge ni en gras,
   quelle que soit la page ou le script qui le colore */
ul.menu ul li > a,
ul.menu ul li > a.active,
ul.menu ul li > a[style] {
    color: #ffffff !important;
    font-weight: normal !important;
}

ul.menu ul li:hover > a {
    color: black !important;
}

@media (max-width: 1023px) {
    ul.menu ul li > a,
    ul.menu ul li > a.active,
    ul.menu ul li > a[style] {
        color: #4B4B4B !important;
    }
}