@charset "utf-8";

.meta {
    color: #999999;
    display: block;
    margin: 0;
    text-align: right;
    padding: 0 1em;
    font-size: 80%;
}

.meta a { color: #999999; }
.meta .lang { display: inline; }
.meta .lang:before { content: "["; }
.meta .lang:after { content: "]"; }

.articles {
    display: block;
    padding: 0;
    margin: 0;
}

.articles > li {
    display: block;
    padding: 0.5em;
    margin: 0.5em;
}

abbr, acronym, blockquote, code, dir, kbd, listing, plaintext,
q, samp, tt, var, xmp {
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    -o-hyphens: none;
    hyphens: none;
}


article {
    display: block;
    margin: 0;
    background-color: white;
    padding: 0;
    font-family: serif;
}

    article > hgroup {
        background-color: rgb(25%,20%,20%);
        border-bottom: 1px solid black;
        color: white;
        text-shadow: 0.2em 0.2em 0.2em black;
        text-align: center;
        font-style: italic;
        font-family: sans;
        width: 100%;
        padding: 0.5em 0;
        margin: 0;
        margin-bottom: 1em;
        font-size: 110%;
    }

        article > hgroup h1 {
            font-size: 125%;
            padding: 0;
            margin: 0;
        }
        article > hgroup h2 {
            font-size: 100%;
            padding: 0;
            margin: 0;
        }

        article > hgroup a[href] {
            color: white;
        }

    article p {
        padding: 0;
        text-align: justify;
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        -ms-hyphens: auto;
        -o-hyphens: auto;
        hyphens: auto;
    }
    article p:lang(fr) {
        text-indent: 2em;
        margin: 0 0.5em;
    }
    article p:lang(en) {
        text-indent: 0;
        margin: 0.75em 0.5em;
    }

    article dl {
        margin: 0;
    }

    article dt {
        font-style: italic;
    }
    article dd {
        margin: 0 0 0.5em 2em;
    }

    article ul {
        margin: 0;
        padding: 0 0 0 1.5em;

    }

    article ul li:lang(fr) {
        list-style-type: none;
    }
    article ul li:lang(fr):before {
        content: "– ";
    }

article section {
    counter-reset: listings subsections;
    margin: 0;
    padding: 0.5em;
}

    article section > p:first-child:first-letter {
        font-size: 200%;
    }

    article section h1 {
        counter-increment: sections;
        text-align: left;
        margin: 0em;
        border-bottom: 1px solid black;
        margin-bottom: 1em;
        font-size: 130%;
        font-weight: bold;
    }
    article section h1::before {
        /*content: counter(sections) '. ';*/
    }

    article section h2 {
        text-align: left;
        margin: 1em 0em 0.5em 0;
        font-weight: normal;
        font-size: 110%;
        font-style: italic;

    }
    article section h2::before {
        counter-increment: subsections;
        /*content: counter(sections) '.' counter(subsections) '. ';*/
    }


code {
    font-size: 110%;
    font-family: monospace;
    background-color: rgb(87%,87%,87%);
}

q:lang(en) { quotes: "“" "”" "‘" "’" }
q:lang(fr) { quotes: "« " " »" "“" "”" }

.remark {
    border: 1px solid black;
    margin: 1em;
    padding: 0.3em;
}
.remark:before { font-weight: bold;}
.remark:lang(en):before {content: "Remark:";}
.remark:lang(fr):before {content: "Remarque :";}

/* Long Article */


article.long #toc {display: none;}
@media screen and (min-width: 45em) {
    article.long #toc { display: block }
}

#toc {
    text-align: left;
    width: 70%;
    margin: 2em auto 2em auto;
    padding: 0.1em 0.3em;
    border: 1px solid black;
    background-color: rgb(63%,67%,70%);
    box-shadow: 0.5em 0.5em 1em rgb(10%,10%,10%);
}
    #toc ol {
        margin: 0;
    }

article.long .purple {
    display:none;
}
article.long *:hover > .purple {display:inline;}


article.long > section.foldable > * {
    display: none;
}

article.long > section.foldable > a.expand {
    display: block;
    width: 1em;
    height: 1em;
    font-size: 150%;
    text-decoration: none;
    color: black;
    border: 2px solid rgb(70%,70%,70%);
    text-align: center;
    border-radius: 0.3em;
}
article.long > section.foldable > h1 {display: block;}
article.long > section.foldable:target > * {
    display: block;
}

@media screen and (min-width: 45em) {
    article.long > section.foldable > * {
    display: block;
}
article.long > section.foldable > a.expand { display: none;}

}