html {
        scroll-behavior: smooth;
    }

    table{
        border: 1px solid #ccc;
        border-collapse: collapse;
        border-spacing: 0;
        font-size: 14px;
        line-height: 1.6;
        margin: 0 0 20px;
        width: 100%;
    }

    td{
        font-weight: normal;
        text-align: left;
        padding: .7em 1.25em;
        border-top: 1px solid #cccccc;
    }
    table h4{
        font-size: 18px;
        margin: 25px 0;
        text-transform: uppercase;
        font-weight: 300;
        font-size: 1.6em;
    }
    .content td h4{
        color: white;
        margin: 0;
        text-transform: none;
    }

    .header td{
        padding: .2em 1.25em;
    }

    .content table{
        margin-bottom: 0px;
    }

    .p1, .p2 {
        text-align: left;
        max-width: 840px;
        margin: 1em auto;
    }

    .infos-sup {
        display: none;
    }

    .up {
        position: -webkit-sticky;
        position: sticky;
        top: calc(100vh - 40px);
        text-align: right;
        width: calc(100% + 50px);
    }

    .up a {
        padding: 10px 15px;
        /*background-color: #004B91;*/
        background: linear-gradient(-40deg, #1e1e3b, #013464, #131b28);
        color: white !important;
        transition: .4s
    }

    .up a:hover {
        background-color: #004B91dd;
    }

    .up a:active {
        background-color: #004B91;
    }

    td p {
        margin: 0;
    }

    h4 {
        margin: 12px 0;
    }

    table {
        margin: 0 0 5px
    }

    .InfoButtonPlus,
    .InfoButtonMoins {
        cursor: pointer;
        font-size: 15pt;
    }

    #myInput {
        width: 66%;
        margin: 15px;
        padding: 7px;
        border-radius: 4px;
        border: thin solid gray;
        font-size: 1em;
    }

    #corpus {
        padding: 7px;
        margin: 5px;
        border: thin solid gray;
        border-radius: 4px;
        font-size: 1em;
    }

    #compte {
        text-align: center;
        color: #666;
        font-size: 11pt;
    }

    .header {
        /*background-color: #004B91;*/
        background: linear-gradient(-40deg, #1e1e3b, #013464, #131b28);
        color: white;
        transition: .4s;
        cursor: pointer;
    }

    .header:hover {
        background-color: #004B91dd;
    }

    .descr-corpus {
        margin: 15px auto;
        max-width: 840px;
        margin: auto;
    }

    .descr-corpus table{
        margin-bottom: 45px;
    }

    .descr-corpus p {
        margin: 0;
        text-align: left;
    }

    .audio-player {
        --sound-button-width: 2em;
        --space: .5em;
        --player-button-width: 3em;
    }

    .audio-player span {
        font-size: 0.85em;
        color: #3D3132;
    }

    .time.duration {
        margin: 0 5px 0 0;
    }

    .time.current-time {
        margin: 0 0 0 5px;
    }

    .audio-icon {
        width: 90%;
        height: 90%;
    }

    .controls {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 95%;
        margin-top: 10px;
    }

    .player-button {
        background-color: transparent;
        border: 0;
        width: var(--player-button-width);
        height: var(--player-button-width);
        cursor: pointer;
        padding: 0;
    }

    .timeline {
        -webkit-appearance: none;
        width: calc(100% - var(--player-button-width));
        height: .5em;
        background-color: #e5e5e5;
        border-radius: 5px;
        background-size: 0% 100%;
        background-image: linear-gradient(#004B91, #004B91);
        background-repeat: no-repeat;
        width: calc(100% - (var(--player-button-width) + var(--sound-button-width) + var(--space)));
        margin-right: var(--space);
        padding: 0;
    }

    .timeline:hover {
        cursor: pointer;
    }

    .timeline::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 1em;
        height: 1em;
        border-radius: 50%;
        cursor: pointer;
        opacity: 0;
        transition: all .1s;
        background-color: #004B91;
    }

    .timeline:hover::-webkit-slider-thumb {
        opacity: 1;
    }

    .timeline::-webkit-slider-runnable-track {
        -webkit-appearance: none;
        box-shadow: none;
        border: none;
        background: transparent;
    }

    .sound-button {
        background-color: transparent;
        border: 0;
        width: var(--sound-button-width);
        height: var(--sound-button-width);
        cursor: pointer;
        padding: 0;
    }