/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/**
 * https://www.w3schools.com/cssref/css_default_values.asp
 */


b {

    font-weight: bold;

}

body {

    display: block;

}

h1 {

    display: block;
    font-size: 1.8em;
    margin-top: 0.83em;
    margin-bottom: 0.83em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;

}

h2 {

    display: block;
    font-size: 1.5em;
    margin-top: 0.83em;
    margin-bottom: 0.83em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;

}

h3 {

    display: block;
    font-size: 1.17em;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;

}

li {

    display: list-item;

}

p {

    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;

}

pre {

 	display: block;
    font-family: monospace;
    white-space: pre;
    margin: 1em 0;

}

table {

    display: table;
    border-collapse: separate;
    border-spacing: 2px;

}

td {

    display: table-cell;
    vertical-align: inherit; 	

}

tr {

    display: table-row;
    vertical-align: inherit;
    border-color: inherit;

}

ul {

    display: block;
    list-style-type: disc;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    padding-left: 40px;

}

:root {

    --main-bg: #ffffff;
    --main-blue-color: rgb(58, 110, 165);

    --menucolors-bg:        rgb(58, 110, 165);
    --menucolors-top:       rgb(58, 110, 165);
    --menucolors-top-hover: rgb(78, 130, 185);
    --menucolors-border:    rgb(32,  92, 154);

    --colors-text-primary: #000000;
    --colors-text-secondary: #6c757d;

    --panel-background: #f8f9fa;
    --panel-border: #dee2e6;

    --code-background: #ffffff;
    --code-border: #e1e4e5;


    --btt-background: #ffffff;
    --btt-border: #c0c4bd;
    --footer-color: #99a095;
    --footer-bg-color: #151515

}

/**
 * Source : https://github.com/RedHatOfficial/RedHatFont/tree/master/webfonts/RedHatDisplay
 */
@font-face {

    font-family: "Red Hat Display";
    src: url("../fonts/RedHatDisplay-Regular.woff2") format("woff2");

}

html {

    height: 100vh;

}

body {

    font-family: Cantarell, 'Droid Sans', Ubuntu, 'DejaVu Sans', Arial, sans-serif;

    font-family: "Red Hat Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji" !important;


    font-family: "Red Hat Display";

    display: flex;
	flex-direction: column;
    align-items: stretch;

    min-height: 100vh;

    line-height: 1.5em;

}

main {

    flex-grow: 1;

}

a {

	text-decoration: none;

}

pre {

    width: fit-content;

    background: #e7f2fa;
    border-left: solid 3px #6ab0de;
    padding: 0.5em 2em 0.5em 1em;

    /* fc-match -s monospace */
    font-family: monospace;
    font-size: 120%;

    display: table;
    white-space: pre-wrap;
    word-break: break-all;

    line-height: 1.5em;

}

pre i {

    font-style: italic;

}


@media only screen and (max-width: 999px) {

    pre {

        margin-left: 8px;

    }

}

@media only screen and (min-width: 1000px) {

    pre {

        padding-right: 50px;

        margin-left: 40px;

    }

}

code {

    font-weight: bold;

    background: var(--code-background);

    border: solid 1px var(--code-border);
    border-radius: .25rem;

    padding-left: 0.3em;
    padding-right: 0.3em;

    font-weight: normal;

}

i {

    font-style: italic;

}

sup {

    vertical-align: super;
    font-size: 70%;

}

table, thead, tbody {

    vertical-align: middle;

}

thead {

    font-weight: bold;

}

td {

    padding-left: 1em;
    padding-right: 1em;

}



ul ul {

    list-style-type: circle;

}

li {

    margin-bottom: 0.5em;

}

li:last-child {

    margin-bottom: 0px;

}

/**
 * Visible sur la page de l'ensemble des articles de blog,
 * ainsi que sur toutes les pages avec un sommaire généré.
 */

h2 > a {

    color: #000;

}

h3 {

    font-weight: normal;
    text-decoration: underline;

}

a.logo {

    opacity: 0;

}

header {

    width: 100%;

    background-color: var(--menucolors-bg);

    text-align: center;

}

@media only screen and (min-width: 1000px) {

    header {

        height: 3em;

        padding-top: 6px;
        padding-bottom: 6px;

    }

    header > nav {

        display: inline-flex;

        line-height: 1em;

    }

    header .logo {

        margin-right: 12em;

    }

}

@media only screen and (max-width: 999px) {

    header .logo {

        display: none;

    }

}

#menucollapser {

    vertical-align: top;

    color: #fff;

}

#menucollapser ul {

    margin: 0;
    padding: 0;

    display: flex;

}

#menucollapser li {

    list-style-type: none;

}

#menucollapser a {

    display: block;

    text-decoration: none;

    color: #fff;
    background-color: var(--menucolors-top);

    border-radius: .25rem;

    padding: 0.8rem;

    transition: all 0.3s;


}

#menucollapser a:hover {

    background-color: var(--menucolors-top-hover);

}


@media only screen and (max-width: 999px) {

    #menucollapser ul {

        flex-direction: column;

    }

    #menucollapser li {

        margin: 0;

    }

}

@media only screen and (min-width: 1000px) {

    #menucollapser ul {

        flex-direction: row;

    }

    #menucollapser li {

        margin: 0 1vw;

    }

    #menucollapser a {

        float: left;

    }

}

/**
 * Collapsing button.
 */

@media only screen and (min-width: 1000px) {

    #menucollapser > a.open,
    #menucollapser > a.close {

        display: none;

    }

}

@media only screen and (max-width: 999px) {

    #menucollapser > a.open,
    #menucollapser > a.close {

        text-align: left;
        font-weight: bold;

    }

    #menucollapser > a > span {

        display:inline-block;
        float: right;

        width: 20px;
        height: 20px;

    }

    #menucollapser > a.open > span {

        background-image: url("data:image/svg+xml;charset=utf8,<svg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'><path stroke='rgba(255, 255, 255, 0.5)' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M5 8L 27 8M5 16L 27 16M5 24L 27 24'/></svg>");

    }

    #menucollapser > a.close > span {

        background-image: url("data:image/svg+xml;charset=utf8,<svg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'><path stroke='rgba(255, 255, 255, 0.5)' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M6 6L 26 26M6 26L 26 6'/></svg>");

    }

    #menucollapser {

        height: 40px;
        overflow: hidden;

    }

    #menucollapser:target {

        height: initial;

    }

    #menucollapser > a.close {

        display: none;

    }

    #menucollapser:target > a.open {

        display: none;

    }

    #menucollapser:target > a.close {

        display: block;

    }

}

/**
 * Sources:
 *
 *   - v0: https://moderncss.dev/pure-css-smooth-scroll-back-to-top/
 *   - v1: https://blog.rolandtoth.hu/pure-css-scroll-to-top/
 *   - v2: current
 */

body {

    position: relative;

}

.scrolltop-wrap {

    box-sizing: border-box;

    position: absolute;
    top: 12rem;
    bottom: 0;
    pointer-events: none;

    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;

}

@media only screen and (max-width: 999px) {

    .scrolltop-wrap {

        right: 1rem;

    }

}

@media only screen and (min-width: 1000px) {

    .scrolltop-wrap {

        right: 2rem;

    }

}

@supports (-moz-appearance: meterbar) {

    .scrolltop-wrap {
        clip: rect(0, 3rem, auto, 0);
    }

}

.scrolltop-wrap a {

    position: fixed;
    position: -webkit-sticky;
    position: sticky;

    top: -5rem;
    margin-bottom: -5rem;

    transform: translateY(100vh);

    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;

    display: inline-block;
    text-decoration: none;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    pointer-events: all;
    outline: none;
    overflow: hidden;

    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;

    opacity: 0.5;
    transition: 0.15s ease-in-out;

    border: 1px solid var(--btt-border);

    background-color: var(--btt-background);
    background-image: url("data:image/svg+xml;charset=utf8,<svg viewBox='-250 -250 820 1012' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' d='M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z'/></svg>");
    background-repeat: no-repeat;
    background-position: center;

}

@media print {

    .scrolltop-wrap {

        display: none !important;

    }

}

footer {

    padding: 0.5em;

    color: var(--footer-color);
    background-color: var(--footer-bg-color);

}

footer a {

    color: var(--footer-color);

}

footer ul {

    list-style: none;

    display: grid;

    margin: 0;
    padding: 0;

    width: max-content;
    margin-left: auto;
    margin-right: auto;

}


/**
 * Affichage des tranches
 */

@media only screen and (max-width: 999px) {

    footer > div.logo {

        display: none;

    }

    footer > div.links {

        display: none;

    }

    footer > div.contact li:first-child {

        display: none;

    }

}

@media only screen and (min-width: 1000px) {

    footer {

        display: grid;
        grid-template-columns: 33% 33% 33%;

    }

}


/**
 * Première tranche
 */

footer > div.logo {

    /* Cf. https://css-tricks.com/centering-css-complete-guide/ */
    position: relative;

    opacity: 0.5;

}

footer > div.logo div {

    position: absolute;

    left: 50%;
    top: 50%;
    transform: translateY(-50%);

    display: grid;

}

footer > div.logo div a:first-child {

    align-self: end;

}


/**
 * Tranche centrale
 */

footer > div.links {

    position: relative;

}

footer > div.links ul {

    position: absolute;

    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);

    text-align: center;

}


/**
 * Dernière tranche
 */

footer > div.contact a {

    opacity: 0.5;

}

footer > div.contact a:hover {

    opacity: 0.8;

}

footer > div.contact a:first-child {

    display: inline-block;
    vertical-align: middle;

    padding: 0.5em;

    background-color: var(--btt-border);

    border: 1px solid var(--btt-border);
    border-radius: 50%;

}

footer > div.contact a:last-child {

    margin-left: 0.5em;

}

.content-with-toc {

    height: 100%;

}


@media only screen and (min-width: 1000px) {

    .content-with-toc {

        width: 1280px;

        display: inline-flex;
        display: grid;

        grid-template-columns: 20% 80%;
        grid-auto-rows: 1fr;

        margin-left: auto;
        margin-right: auto;

    }

    .content-with-toc .content {

        padding: 1em;

        background-color: var(--panel-background);

        border-left: 1px solid var(--panel-border);

    }


    /* Barre de navigation */

    .toc-navbar {

        text-align: center;
        margin: 1em 0 1em 0;

    }

    .toc-navbar a {

        display: inline-block;
        text-decoration: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        pointer-events: all;
        outline: none;
        overflow: hidden;
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 50%;
        opacity: 0.5;
        transition: 0.15s ease-in-out;
        border: 1px solid var(--btt-border);
        background-color: var(--btt-background);
        background-image: url("data:image/svg+xml;charset=utf8,<svg viewBox='-250 -250 820 1012' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' d='M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z'/></svg>");
        background-repeat: no-repeat;
        background-position: center;

    }

    .toc-navbar a:hover {

        opacity: 1;
        background-color: var(--panel-background);

    }

    .toc-navbar a:first-of-type {

        transform: rotate(-90deg) translateX(-10px);

    }

    .toc-navbar a:last-of-type {

        transform: rotate(90deg) translateX(10px);

    }


    /* Sommaire */

    .content-with-toc .toc-panel {

        padding-top: 2em;
        padding-right: 2em;

    }

    .toc-panel > a > h1, .toc-panel > a > h2 {

        font-size: 1em;
        margin: 0;
        font-weight: normal;

    }

    .toc-panel > a > h1 {

        margin-top: 1.5em;

        font-weight: bold;
        color: var(--colors-text-primary);

    }

    .toc-panel > a> h2 {

        margin-left: 1.5em;

        color: var(--colors-text-secondary);

    }

}


@media only screen and (max-width: 999px) {

    .content-with-toc .toc-panel {

        display: none;

    }

}

:root {
    --ribbon-square: 360px;
    --ribbon-middle: 180px;
    --ribbon-height: 35px;
}

.corner-ribbon-wrapper {

    position: fixed;
    overflow: hidden;
    top: 0;
    z-index: 9999;
    pointer-events: none;

    /**
     * Définitions rapportées du code PHP d'origine
     */

    width: var(--ribbon-square);
    height: var(--ribbon-square);

}

@media only screen and (max-width: 999px) {

    .corner-ribbon-wrapper {

        display: none;

    }

}

.corner-ribbon {

    position: absolute;

    padding: 2px 0px;

    background-color: #a00;

    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;

    z-index: 9999;
    pointer-events: auto;

    /* Dégradé : transparent en haut, un peu moins en bas */
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.15)));
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
    background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
    background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));

    /* Ombre portée */
    -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5);
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5);

    /**
     * Définitions rapportées du code PHP d'origine
     */

/*
        $middle = $square / 2;
        $top = $middle - intval($middle * sin(deg2rad(45)));
        $right = intval($middle * cos(deg2rad(45))) - $middle - $height;
*/


    /*top: calc( var(--ribbon-middle) - var(--ribbon-middle) * sin(45deg) )*/;
    top: calc( var(--ribbon-middle)  - var(--ribbon-middle) * 0.70710678118 );
    /*right: calc( var(--ribbon-middle) * cos(45deg) - var(--ribbon-middle) - var(--ribbon-height) );*/
    right: calc( var(--ribbon-middle) * 0.70710678118 - var(--ribbon-middle) - var(--ribbon-height) );

    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);

    font-size: 15px;

}

.corner-ribbon a {

    color: #fff;
    text-decoration: none;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
    text-align: center;

    display: inline-block;
    padding: 2px 0;

    /* Effet en bordure */
    border-width: 1px 0;
    border-style: dotted;
    border-color: #fff;
    border-color: rgba(255, 255, 255, 0.7);

    /**
     * Définitions rapportées du code PHP d'origine
     */

    width: var(--ribbon-square);
    line-height: var(--ribbon-height);

}

.corner-ribbon-wrapper.right {

    right: 0;

}

.content-with-toc {

    height: 100%;

}


@media only screen and (min-width: 1000px) {

    .content-with-toc {

        width: 1280px;

        display: inline-flex;
        display: grid;

        grid-template-columns: 20% 80%;
        grid-auto-rows: 1fr;

        margin-left: auto;
        margin-right: auto;

    }

    .content-with-toc .content {

        padding: 1em;

        background-color: var(--panel-background);

        border-left: 1px solid var(--panel-border);

    }


    /* Barre de navigation */

    .toc-navbar {

        text-align: center;
        margin: 1em 0 1em 0;

    }

    .toc-navbar a {

        display: inline-block;
        text-decoration: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        pointer-events: all;
        outline: none;
        overflow: hidden;
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 50%;
        opacity: 0.5;
        transition: 0.15s ease-in-out;
        border: 1px solid var(--btt-border);
        background-color: var(--btt-background);
        background-image: url("data:image/svg+xml;charset=utf8,<svg viewBox='-250 -250 820 1012' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' d='M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z'/></svg>");
        background-repeat: no-repeat;
        background-position: center;

    }

    .toc-navbar a:hover {

        opacity: 1;
        background-color: var(--panel-background);

    }

    .toc-navbar a:first-of-type {

        transform: rotate(-90deg) translateX(-10px);

    }

    .toc-navbar a:last-of-type {

        transform: rotate(90deg) translateX(10px);

    }


    /* Sommaire */

    .content-with-toc .toc-panel {

        padding-top: 2em;
        padding-right: 2em;

    }

    .toc-panel > a > h1, .toc-panel > a > h2 {

        font-size: 1em;
        margin: 0;
        font-weight: normal;

    }

    .toc-panel > a > h1 {

        margin-top: 1.5em;

        font-weight: bold;
        color: var(--colors-text-primary);

    }

    .toc-panel > a> h2 {

        margin-left: 1.5em;

        color: var(--colors-text-secondary);

    }

}


@media only screen and (max-width: 999px) {

    .content-with-toc .toc-panel {

        display: none;

    }

}

table.highlighttable {

    background: #e7f2fa;
    border-left: solid 3px #6ab0de;
    padding: 0.1em 1em 0.1em 1em;

}

table.highlighttable pre {

    /* reset.css */

    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;

    /* fc-match -s monospace */
    font-family: monospace;
    font-size: 120%;

    display: table;
    white-space: pre-wrap;
    word-break: break-all;

    line-height: 1.8em;

    width: fit-content;

}

table.highlighttable td.linenos pre {

    opacity: 0.5;

}

@media only screen and (max-width: 999px) {

    table.highlighttable {

        margin-left: 8px;

        display: block;
        overflow: auto;

    }

}

@media only screen and (min-width: 1000px) {

    table.highlighttable {

        margin-left: 40px;

        padding-right: 2em;

    }

}