/** Reset **/
ul,
ol {
    margin: 0;
    padding: 0;
}

/** Prevent horizontal scrolling */
html, body {  
  overflow-x: hidden;  
  width: 100%;  
  height: 100%; /* Prevents vertical scrolling bugs on some devices */  
  margin: 0;  
  padding: 0;  
} 

/** 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  **/
.cube-link {
    text-transform: uppercase;
}

ul {
    list-style: none;
}

.bulleted li {
    list-style: circle;
}

.dialogue {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.dialogue li {
list-style-type: '— ';
}

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

a:hover {
    color: var(--second-accent);
}

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

p {
    text-wrap: wrap;
}

.horizontal-menu ul,
.horizontal-menu ol {
    font-family: 'Fira-sans', Calibri, sans-serif;
    font-size: 1.5rem;
}

.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 {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--small-gutter);
}

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

li {
    margin: 0.6rem 0 0 8px;
}

/** Element speciaux **/
/* Navigation */
.horizontal-menu ul,
.horizontal-menu ol {
    width: 100%;
    margin: 0.4rem auto 0.4rem auto;
    display: flex;
    justify-content: space-around;
}

.colapsing-menu ul,
.colapsing-menu ol {
    flex-direction: column;
}

/* Code */
pre {
    font-family:'Courier New', Courier, monospace;
    max-width: 80%;
    margin: 1rem auto;
    white-space: pre-wrap;
    overflow-x: auto;
    border: 1px solid #333;
    padding: 1em;
    overflow-x: scroll;
}

/* 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);
        width: 95%;
    }

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


    article {
       width: 100%
    }


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

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

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

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

    p,
    img {
        width: 100%;
        margin-top: 1em;
    }

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


/** Computer **/
@media (min-width: 980px) {
    .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 {
        margin-top: 2rem;
        width: inherit;
    }


    iframe {
        display: block;
        margin: auto;
    }

    .colapsing-menu ul,
    .colapsing-menu ol {
        flex-direction: row;
    }
}

@media screen and (min-height: 980px) {
    footer {
        margin-top: 0;

        width: inherit;

    }

    .floating-footer {
        position: fixed;
        bottom: var(--large-gutter);
    }
}

/** 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: 24ch;
        margin: 0;
    }

    .horizontal-menu ul,
    .horizontal-menu ol {
        display: none;
    }

}

/** Youtube video specific */
.youtube-video-container {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.youtube-video-container::after {
    display: block;
    content: "";
    padding-top: 56.25%;
}

.youtube-video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}



blockquote {
	font-weight: 100;
	font-size: 2rem;
	max-width: 600px;
	line-height: 1.4;
	position: relative;
	margin: 0;
	padding: .5rem;
}

blockquote:before,
blockquote:after {
	position: absolute;
	color: #f1efe6;
	font-size: 8rem;
	width: 4rem;
	height: 4rem;
}

blockquote:before {
	content: '“';
	left: -5rem;
	top: -2rem;
}

blockquote:after {
	content: '”';
	right: -5rem;
	bottom: 1rem;
}

cite {
	line-height: 3;
	text-align: left;
}

/** Tables */
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
  overflow:hidden;padding:10px 5px;word-break:normal;}
.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
  font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
.tg .tg-0pky{border-color:inherit;text-align:left;vertical-align:top}