/* Instructions CSS extraites de la feuille de style “clasless.css” (https://classless.de) et adaptées par Yves Goguely (https://comvi.plurimedia.greta-clermont-auvergne.fr)

/* ----- variables du thème graphique 'light' de classless.css ----- */

:root {
    /* positionnement */

    --navpos: fixed;
    /* valeurs : fixed ou absolute */

    /* couleurs */

    --navblack: #333;
    --navdark: #444;
    --navmed: #777;
    --navlight: #ddd;
    --navwhite: #fff;

    --navfocus: #07c;
}

/* ----- Positionnement des éléments sous la barre de menu ----- */

body {
    padding-top: 3.5rem;
}

h2,
h3 {
    padding-top: 3.5rem;
}

/* ----- Couleurs des liens ----- */

nav strong {
    color: var(--navwhite);
}

/* ▼ affiche une flèche après le premier lien gras */
/*nav a strong::after {
    content: "▲";
    padding-left: 1.5em;
}*/

nav a {
    color: var(--navwhite);
    text-decoration: none;
    background: none;
}

nav a:hover {
    color: var(--navlight);
}

nav a:visited {
    color: var(--navwhite);
}


/* ----- Stylisation globale du menu ----- */

nav {
    background-color: var(--navblack);
    padding-left: 2rem;
}

body > nav,
header nav {
    position: var(--navpos);
    top: 0;
    left: 0;
    right: 0;
    z-index: 41;
    opacity: .9;
    /*box-shadow: 0vw -50vw 0 50vw var(--clight), 0 calc(-50vw + 2px) 4px 50vw var(--cdark);*/
}

nav ul {
    list-style-type: none;
}

nav ul:first-child {
    margin: 0;
    padding: 0;
    overflow: visible;
}

nav ul:first-child > li {
    display: inline-block;
    margin: 0;
    padding: 0.7rem;
    /* Hauteur du menu */
}

/* ----- Stylisation des menus déroulants ----- */

nav ul > li > ul {
    display: none;
    width: auto;
    position: absolute;
    margin: 0.5rem 0;
    padding: 1rem 2rem;
    background-color: var(--navdark);
    /* ▲ Couleur des menus déroulants */
    /*border-left: 1px solid var(--navblack);*/
    /* ▲ Bordure à gauche des menus déroulés */
    z-index: 99;
}

nav ul > li > ul > li {
    white-space: nowrap;
    padding-bottom: .5rem;
}

nav ul > li:hover > ul {
    display: block;
}

/* ----- Classes pour l'affichage d'un onglet à droite de la barre de menu ----- */

.float-right {
    float: right !important;
}

li.float-right.sticky {
    margin-right: 1rem;
}

/* ----- Masquage du menu sur petits écrans ----- */

@media (max-width: 60rem) {

    nav ul:first-child > li:not(:first-child):not(.sticky) {
        display: none;
    }

    nav ul:first-child:hover > li:not(:first-child):not(.sticky) {
        display: block;
        float: none !important;
    }
}