@font-face {
        font-family: 'Plus Jakarta Sans';
        src: url('/assets/fonts/PlusJakartaSans.woff2') format('woff2-variations');
        font-weight: 200 800;
        font-style: normal; /* Gère aussi l'italique via l'axe slant interne */
        font-display: swap;
}

@font-face {
        font-family: 'Plus Jakarta Sans';
        src: url('/assets/fonts/PlusJakartaSans-italic.woff2') format('woff2-variations');
        font-weight: 200 800;
        font-style: italic; /* Gère aussi l'italique via l'axe slant interne */
        font-display: swap;
}

@font-face {
        font-family: 'Lora';
        src: url('/assets/fonts/Lora.woff2') format('woff2-variations');
        font-weight: 400 700;
        font-style: normal;
        font-display: swap;
}

@font-face {
        font-family: 'Lora';
        src: url('/assets/fonts/Lora-italic.woff2') format('woff2-variations');
        font-weight: 400 700;
        font-style: italic;
        font-display: swap;
}

@font-face {
        font-family: 'Source Code Pro';
        src: url('/assets/fonts/SourceCodePro.woff2') format('woff2-variations');
        font-weight: 200 900;
        font-style: normal;
        font-display: swap;
}

:root {
	--background: white;
	--foreground: black;
	--mid: gray;
	--accent: #E0E0E0;

	--size0: 13px;
	--size1: 16px;
	--size2: 20px;
	--size3: 25px;
	--size4: 33px;

	--serif: "Lora", serif;
	--sans: "Plus Jakarta Sans", sans-serif;
	--mono: "Source Code Pro", mono;

	color: var(--foreground);

	font-size: 16pt;
}

/* Auto dark theme */

@media (prefers-color-scheme: dark) {

	:root {
		--background: #121212;
		--foreground: #E0E0E0;
		--accent: #404040;
	}
}

math {
        /* On liste les polices système mathématiques standards par OS */
        font-family:
        "Latin Modern Math",      /* Linux / TeX users */
        "STIX Two Math",          /* Standard scientifique */
        "Cambria Math",           /* Windows */
        "STIXGeneral",            /* macOS (ancien) */
        "Latin Modern",           /* Fallback */
        serif;                    /* Ultime secours */
}

/* Body */

body {
	background-color: var(--background);
	margin: 0 auto;
	max-width: 650px;
	line-height: 1.5;
	font-size: var(--size1);
	font-family: var(--serif);
	padding: 0 10px;
}

/* Structure de la page */

nav {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        margin: 30px 0;
}

nav a {
	font-size: var(--size2);
	font-family: var(--sans);
}

footer {
	margin: 40px 0 20px 0;
	text-align: center;
	font-family: var(--sans);
}

footer p {
	font-size: var(--size0);
	text-align: center;
}

footer a {
	padding: 0;
	text-align: center;
}

/* Inline elements */

h1 {
        font-family: var(--sans);
	font-size: var(--size4);
	text-align: center;
	margin: 20px 0;
}

h2 {
        font-family: var(--sans);
	font-size: var(--size3);
	margin: 40px 0 30px 0;
	border-bottom: 1px solid var(--foreground);
}

h3 {
        font-family: var(--sans);
	font-size: var(--size2);
	margin: 40px 0 20px 0;
}
p {
	text-align: justify;
	margin: 20px 0;
}

strong {
	font-weight: bolder;
}

em {
	font-style: italic;
}

mark {
        color: var(--foreground);
        background-color: var(--mid);
}

a {
	text-decoration: underline;
	color: var(--foreground);
}

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

/* Règle */

hr {
	margin: 20px 0;
	border-bottom: 1px solid var(--foreground);
}

/* Listes */

li {
        margin: 10px auto;
}

/* Figures et images */

figure {
        box-sizing: border-box;
	margin: 20px 0;
	overflow-x: auto;
}

figcaption {
        font-family: var(--sans);
	text-align: center;
	font-size: var(--size0);
	margin: 10px 0;
	position: sticky;
	left: 0;
	z-index: 1;
	text-align: center;
}

img {
        box-sizing: border-box;
        border: 1px solid var(--foreground);
	margin: 10px auto;
	display: block;
	width: 100%;
}

/* Blocs de code */

pre {
	border: 1px solid var(--foreground);
	padding: 20px;
	margin: 20px 0;
	overflow-x: auto;
}

code {
        font-family: var(--mono);
}

/* Citations */

blockquote {
	padding: 0 30px;
	margin: 20px 0;
	text-align: justify;
	border-left: 7px solid var(--foreground);
}

/* Tableaux */

table {
        border-collapse: collapse;
        font-family: var(--sans);
        border: 1px solid var(--foreground);
        margin: 1.5rem 0;
        margin: 0 auto;
}

figure > table {
        width: max-content;
}

td, th {
        border: none;
        text-align: start;
        padding: 0.5rem;
}

th {
        background-color: var(--foreground);
        color: var(--background);
        font-weight: bold;
}

tr:nth-child(even) {
        /* Set every other cell slightly darker. Improves readability. */
        background-color: var(--accent);
}

table caption {
        caption-side: bottom;
        text-align: center;
	font-size: var(--size0);
	margin: 10px 0;
	position: sticky;
	left: 0;
	z-index: 1;
	text-align: center;
}

/* Notes de bas de page */

a[role="doc-noteref"] {
    text-decoration: none;
    color: var(--mid);
    padding: 0 2px;
}

a[role="doc-noteref"]:hover {
    color: var(--foreground);
}

.footnotes {
        font-family: var(--sans);
}

.footnotes::before {
        content: "Notes de bas de page";
        display: block;
        font-family: var(--sans);
        font-size: var(--size3);
        font-weight: bold;
        margin: 40px 0 30px 0;
        border-bottom: 1px solid var(--foreground);
}

.footnotes hr {
    display: none; /* On remplace le <hr> par le border-top ci-dessus */
}

a[role="doc-backlink"] {
        text-decoration: none;
        color: var(--mid);
        margin-left: 5px;
}

a[role="doc-backlink"]:hover {
    color: var(--foreground);
}

/* Balise temporelle */

time {
        font-family: var(--mono)
}

/* Contenu inclus */

iframe {
	border: 1px solid var(--foreground);
	margin: 20px auto;
}

/* Impression */

@media print {
	nav {
		display: none;
	}
}

/* Smartphone */

@media screen and (max-width: 500px) {

	nav {
		display: block;
		margin: 0;
		position: static;
	}

	nav a {
        	display: block;
        	padding: 10px;
                margin: 10px 0;
        	text-align: center;
        	background-color:  var(--foreground);
        	color: var(--background);
        	border: 1px solid var(--foreground);
        	text-decoration: none;
        	font-family: "Noto Sans", sans-serif;
	}

	nav a:hover, a:active {
		background-color: var(--background);
	}

	footer a {
		padding: 5px 0;
	}
}