html {
        scroll-behavior: smooth;
    }

    .p1 {
        text-align: justify;
    }

    #container {
        width: 100%;
    }

    .infos-sup {
        display: none;
    }

    .up {
        position: -webkit-sticky;
        position: sticky;
        top: 15px;
        text-align: right;
        width: 950px;
    }

    .up a {
        padding: 10px 15px;
        background-color: #004B91;
        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;
    }

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

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

    .header {
        background-color: #004B91;
        color: white;
        transition: .4s;
        cursor: pointer;
    }

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

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

    .descr-corpus {
        margin-bottom: 15px;
    }

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

    .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;
    }