:root {
    --couleur-texte-discrete: #b3b3b3;
    --couleur-texte-discrete-inverse: #636363;
    --couleur-texte-non-discrete: #d2d2c2;
    --couleur-texte-non-discrete-inverse: #000;
    --couleur-fond-hover: #3a3b3b;
    --couleur-fond-hover-inverse: #f0f0ec;
    --couleur-fond: #232424;
    --couleur-fond-inverse: #fff;
    --svg-brightness: 1;
}

@media(prefers-color-scheme: light) {
    :root {
        --couleur-texte-discrete: #636363;
        --couleur-texte-discrete-inverse: #b3b3b3;
        --couleur-texte-non-discrete: #000;
        --couleur-texte-non-discrete-inverse: #d2d2c2;
        --couleur-fond-hover: #f0f0ec;
        --couleur-fond-hover-inverse: #3a3b3b;
        --couleur-fond: #fff;
        --couleur-fond-inverse: #232424;
        --svg-brightness: 0;
    }
}

/* Classe générique pour les éléments uniquement mobile. */
@media not (max-width: 860pt) {
    .bp-m {
        display: none;
    }
}

/* Classe générique pour les éléments uniquement bureau. */
@media (max-width: 860pt) {
    .bp-d {
        display: none;
    }
}

.flex-grow {
    display: flex;
    flex-grow: 1;
}

.sticky {
    position: sticky;
}

.top-0 {
    top: 0;
}

.spaced-items > *:not(:last-child) {
    margin-bottom: 15pt;
}

a {
    color: var(--couleur-texte-non-discrete);
    transition: color 0.7s linear;
}

fieldset {
    border: 1px solid var(--couleur-texte-non-discrete);
    transition: border 0.7s linear;
}

fieldset legend {
    font-weight: bold;
}

body {
    background-color: var(--couleur-fond);
    color: var(--couleur-texte-non-discrete);
    font-family: 'Source Serif Pro', serif;
    margin: 0;
    transition: background-color 0.7s linear, color 0.7s linear;
}

@media(max-width: 860pt) {
    zone-hover-droite,
    zone-hover-gauche {
        bottom: 0;
        display: block;
        left: 0;
        position: fixed;
        right: 0;
        top: 0;
    }

    zone-hover-droite {
        left: 94%;
    }

    zone-hover-gauche {
        right: 94%;
    }
}

.menu-mobile {
    background-color: var(--couleur-fond);
    border-bottom: 2px solid;
    opacity: 1;
    transition: background-color 0.7s linear, top 0.5s ease-out, opacity 0.5s ease-in;
    z-index: 5;
}

.menu-mobile.hidden {
    opacity: 0;
    top: -20%;
    transition: top 0.5s ease-in, opacity 0.5s ease-out;
}

.menu-mobile .infos-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.menu-mobile .infos-header * {
    margin: 0;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.menu-mobile .infos-header * + * {
    margin-top: 3pt;
}

.menu-mobile .infos-header .titre-livre,
.menu-mobile .infos-header .titre-page-actuelle {
    font-size: 100%;
}

.menu-mobile .infos-header .titre-page-actuelle {
    font-weight: bold;
}

.menu-mobile label.button {
    /* Pour centrer l'élément .infos-header. */
    flex-basis: 100pt;
    text-align: center;
}

.menu-mobile label.button {
    text-transform: uppercase;
}

.opaque {
    background-color: var(--couleur-fond);
    transition: background-color 0.7s linear;
}

label.button {
    cursor: pointer;
    display: block;
    font-size: 16pt;
    padding: 15pt;
}

label.button:hover {
    text-decoration: underline;
}

button {
    -webkit-appearance: none;
    align-items: center;
    appearance: none;
    background-color: var(--couleur-fond);
    border: 0;
    color: var(--couleur-texte-non-discrete);
    display: flex;
    flex-grow: 1;
    font-family: 'Source Serif Pro', serif;
    font-size: 13pt;
    justify-content: center;
    margin: 0;
    padding: 15pt;
    text-transform: uppercase;
}

button:disabled {
    color: var(--couleur-texte-discrete-inverse);
}

button:not(:disabled):hover,
button:not(:disabled):focus {
    background-color: var(--couleur-fond-hover);
}

button.bordered {
    border: 1px solid;
}

button.rounded {
    border-radius: 1em;
    overflow: hidden;
}

.button-container {
    background-color: var(--couleur-fond-inverse);
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    height: 100%;
}

.button-container.bordered {
    border: 1px solid;
}

.button-container.rounded {
    border-radius: 1em;
    overflow: hidden;
}

@media not (max-width: 860pt) {
    label.button {
        font-size: 13pt;
        padding: 4pt;
    }
}


main {
    display: flex;
    line-height: 1.45;
}

article {
    margin-bottom: 200pt;
    margin-left: 30pt;
    margin-right: 30pt;
    flex-basis: 400pt;
}

.informations-secondaires-wrapper,
.navigation-principale-wrapper {
    flex-basis: 200pt;
    opacity: 0.2;
    transition: opacity 2s ease-in 2s;
    z-index: 10;
}

.informations-secondaires-wrapper:hover,
.navigation-principale-wrapper:hover {
    opacity: 1;
    transition: opacity 0.2s linear 0s;
}

.disabled-reader-mode .informations-secondaires-wrapper,
.disabled-reader-mode .navigation-principale-wrapper {
    opacity: 1;
    transition: opacity 0.2s linear 0s;
}

.informations-secondaires-wrapper {
    margin-right: auto;
}

.navigation-principale-wrapper {
    margin-left: auto;
}

@media(max-width: 860pt) {
    .menu-mobile {
        display: flex;
        justify-content: space-between;
    }

    .informations-secondaires-wrapper,
    .navigation-principale-wrapper {
        flex: unset;
        opacity: 0;
        transition: opacity 0.2s linear 0s;
    }

    .informations-secondaires-wrapper:hover,
    .navigation-principale-wrapper:hover {
        /* Rétablir la valeur pour que le menu se ferme quand on clique sur Fermer. */
        opacity: 0;
    }

    input#mecanisme-menu-2:checked ~ main:first-of-type .informations-secondaires-wrapper,
    input#mecanisme-menu-1:checked ~ main:first-of-type .navigation-principale-wrapper {
        opacity: 1;
        transition: opacity 0.2s linear 0.3s;
    }
}

.informations-secondaires-inner,
.navigation-principale-inner {
    display: flex;
    flex-direction: column;
    min-height: calc(100% - 30pt);
    padding: 15pt;
}

.informations-secondaires-inner #options {
    display: flex;
    flex-direction: column;
}

informations-secondaires,
nav.principale {
    display: block;
    height: 100vh;
    /* Dynamic viewport height. */
    height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    position: sticky;
    top: 0;
    transition: background-color 0.7s linear;
}

nav.principale {
    text-align: right;
}

@media(max-width: 860pt) {
    informations-secondaires,
    nav.principale {
        background-color: var(--couleur-fond);
        position: fixed;
    }

    informations-secondaires:hover,
    nav.principale:hover {
    }

    informations-secondaires {
        border-left: 2px solid var(--couleur-texte-non-discrete);
        bottom: 0;
        left: calc(100% + 2px);
        transition: background-color 0.7s linear, border-left 0.7s linear, left 0.5s;
        /* Forcer largeur pour que la colonne conserve sa largeur. */
        width: 200pt;
    }

    input#mecanisme-menu-2:checked ~ main:first-of-type informations-secondaires {
        left: calc(100% + 2px - 200pt);
    }

    nav.principale {
        border-right: 2px solid var(--couleur-texte-non-discrete);
        bottom: 0;
        right: calc(100% + 2px);
        transition: background-color 0.7s linear, border-right 0.7s linear, right 0.5s;
        /* Forcer largeur pour que la colonne conserve sa largeur. */
        width: 200pt;
    }

    input#mecanisme-menu-1:checked ~ main:first-of-type nav.principale {
        right: calc(100% + 2px - 200pt);
    }
}

nav.principale header {
    font-size: 1.5em;
}

.navigation-chapitres {
    padding: 0;
}

.navigation-chapitres li {
    display: block;
}

.navigation-chapitres li a {
    border-right: 1px solid;
    /*transition: border-right-width 0.05s linear 0s;*/
}

.navigation-chapitres li a:focus,
.navigation-chapitres li a:hover {
    background-color: var(--couleur-fond-hover);
    border-right-width: 3px;
}

.navigation-chapitres li.current {
    border-right: 3px solid;
}

.navigation-chapitres li a {
    display: block;
    font-variant: small-caps;
    padding: 0.5em;
    text-decoration: none;
}

label.radio-type-0 {
    align-items: baseline;
    display: flex;
}

label.radio-type-0 input {
    flex-shrink: 0;
    height: 15pt;
    width: 15pt;
}

@media not (max-width: 860pt) {
    label.radio-type-0 input {
        height: 10pt;
        width: 10pt;
    }
}

.nav-gauche-droite {
    display: flex;
    font-variant: small-caps;
}

.nav-gauche-droite div {
    display: flex;
    flex-basis: 50%;
    justify-content: center;
}

.nav-gauche-droite a {
    color: var(--couleur-texte-discrete);
    display: block;
    flex-grow: 1;
    font-size: 140%;
    padding: 10pt 10pt 30pt 10pt;
    text-align: center;
    text-decoration: none;
}

.nav-gauche-droite a:focus,
.nav-gauche-droite a:hover {
    background-color: var(--couleur-fond-hover);
    color: var(--couleur-texte-non-discrete);
/*    transition: color 0.1s linear 0s;*/
}

.skip-to-content {
    position: absolute;
    transform: translateY(-100%);
}

.skip-to-content:focus {
    position: revert;
    transform: translateY(0%);
}


/*
 * Bookmark system.
 */
.resume-bubble-container {
    display: flex;
    justify-content: center;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

.resume-bubble-container .resume-bubble {
    align-items: center;
    background: var(--couleur-fond-inverse);
    border-radius: 1em;
    border-style: solid;
    border-width: 1px;
    color: var(--couleur-texte-non-discrete);
    display: flex;
    gap: 1px;
    overflow: hidden;
}

.resume-bubble-container .resume-bubble > .text-container {
    align-items: center;
    background: var(--couleur-fond);
    display: flex;
    height: 100%;
    padding: 1em;
}