/** Fonts **/
@font-face {
    font-family: "Oxygen";
    src: url('assets/fonts/Oxygen/Oxygen-Light.ttf') format('truetype');
}

@font-face {
    font-family: "Fira-sans";
    src: url('assets/fonts/Fira_Sans/FiraSans-Regular.ttf') format('truetype');
}

@font-face {
    font-family: "Prompt";
    src: url('assets/fonts/Prompt/Prompt-Regular.ttf') format('truetype');
}

/** Color Scheme **/
:root {
    --main-color: #333333;
    --accent: #ff6400;
    --second-accent: #478baa;
    --third-accent: #FF0064;
    --white: #FFFFFF;
    --light-grey: #e5edf4;
    --grey-accent: #6F6F6F;
    --small-gutter: 10px;
    --large-gutter: 40px;

}


/** Typo  **/
ul {
    list-style: none;
}

a {
    color: var(--accent);
    text-decoration: none;
}

h1 {
    font-size: 1.6em;
    font-family: 'Oxygen', Calibri, sans-serif;
    color: var(--accent);
    text-wrap: wrap;
}

h2,
h3 {
    font-family: 'Fira-sans', Calibri, sans-serif;
    color: var(--second-accent);
    text-wrap: wrap;
}

h3 {
    font-size: 0.8em;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.date {
    font-style: italic;
    font-weight: 400;
}

body {
    font-family: 'Prompt', 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: var(--main-color);
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    margin: 0;
    padding: 0;
}

/** Layout **/
.inline-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline;
}

.inline-list li {
    display: inline;
}

.inline-list li::after {
    content: ",\00a0";
    /* virgule + espace insécable */
}

.inline-list li:last-child::after {
    content: ".";
}

.print-only {
    color: red;
    visibility: hidden
}


main {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--small-gutter);
}

section {
    margin-top: var(--small-gutter);
}

/* Mobile First */
@media screen {
    .central-column {
        padding: 0 var(--small-gutter) 0 var(--small-gutter);
        margin: var(--large-gutter) auto var(--large-gutter) auto;
        background-color: var(--white);
    }

    footer {
        height: 2em;
        font-size: 10px;
    }


    article {
       flex: 1;
    }


    dl {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    dt {
        width: 8ch;
        margin: 0;
    }

    dt::after {
        content: " : ";
    }

    dd {
        width: 20ch;
        margin: 0;
    }

    .small-padding {
        padding: var(--small-gutter) var(--small-gutter) var(--small-gutter) var(--small-gutter);
    }
}


/** Computer **/
@media (min-width: 570px) {
    .hero {
        margin: 5vh auto 5vh auto;
    }

    .central-column {
        width: 980px;
    }


    .small-padding {
        padding: 0;
    }

    aside {
        width: calc(980px - 3*var(--small-gutter) - 700px);
        background-color: var(--light-grey);
        padding: 0 var(--small-gutter);
    }

    h1 {
        font-size: 2.4em;
    }

    h3 {
        font-size: 1.2em;
    }

    footer {
       /* position: fixed;*/
        bottom: var(--large-gutter);
        width: inherit;
    }

}

/** Print **/
@media print {
    @page {
        size: a4;
        size: portrait;
        margin: 0;
    }


    h1 {
        font-size: 2.6em;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        color: var(--main-color);
    }

    h2,
    h3 {
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        color: var(--grey-accent)
    }

    body {
        font-family: 'Times New Roman', Times, serif;
        color: var(--main-color);
    }

    .page,
    .page-break {
        break-after: page;
    }

    div,
    h1,
    h2,
    h3 {
        margin: 0;
        padding: 0;
    }

    header {
        margin: 0;
        background-color: var(--light-grey);
    }

    body {
        margin: 0;
        padding: 0;
    }

    .small-padding {
        padding: var(--small-gutter) var(--large-gutter) var(--small-gutter) var(--large-gutter);
    }

    .central-column {
        width: 100%;
        margin: 0;
    }

    .web-only {
        display: none;
    }

    main {
        width: 100%;
    }

    article {
        width: 60%;
    }

    aside {
        width: 30%;
        background-color: var(--white);
        padding: 0;
    }
    dl {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    dt {
        width: 8ch;
        margin: 0;
    }

    dt::after {
        content: " : ";
    }

    dd {
        width: 20ch;
        margin: 0;
    }

}