/*
À l'origine (honteusement) pompé sur la feuille de style de https://calomel.org/ :)
Adapté et trituré selon mes besoins... et mon humeur
Publié sous Licence Publique IV : https://www.shaftinc.fr/licence-publique-iv.html
Les polices de caractères Encode Sans sont sous licence Open Font Licence (https://github.com/impallari/Encode-Sans/blob/master/OFL.txt) La variant Narrow utilisée s'appelle désormais Semi Condensed et est trop compacte selon moi (que ce soit la variante Light (graisse de 300) que Regular (graisse de 400).
La police de caractère Hack est sous licence MIT, consultable ici : https://github.com/source-foundry/Hack/blob/master/LICENSE.md
La police pour l'impression est Palatino Linotype ou une police de la famille Palatino (https://en.wikipedia.org/wiki/Palatino) dont une version libre doit trainer sur votre machine.
*/

@font-face {
	font-family: "Encode Sans Narrow";
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: local("Encode Sans Narrow Light"),url("fonts/EncodeSansNarrow-Light.woff2") format("woff2");
}

@font-face {
	font-family: "Encode Sans Narrow";
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	src: local("Encode Sans Narrow SemiBold"),url("fonts/EncodeSansNarrow-SemiBold.woff2") format("woff2");
}

@font-face {
	font-family:"Hack";
	font-style:normal;
	font-weight:400;
	font-display: swap;
	src: local("Hack Regular"), url("fonts/hack-regular.woff2") format("woff2");
}

@font-face {
	font-family:"Hack";
	font-style:normal;
	font-weight:700;
	font-display: swap;
	src: local("Hack Bold"), url("fonts/hack-bold.woff2") format("woff2");
}

@font-face {
	font-family:"Symboles";
	font-style:normal;
	font-weight:400;
	font-display: swap;
	src: local("Symboles"), url("fonts/Symboles.woff2") format("woff2");
}

@media only screen {
	html {
		scroll-padding-top: 60px;
	}

	body {
		display: block;
		font-family: "Encode Sans Narrow", sans-serif;
		margin: 0 auto 0 15px;
		overflow: auto;
		overflow-x: hidden;
		padding: 0px;
		max-width: 1300px;
	}

	nav {
		position: fixed;
		top: 0;
		width: 100%;
		height: 50px;
		margin-left: -15px;
		z-index: 10;
	}

	nav ul {
		list-style-type: none;
		margin: 0 0 0 15px;
		padding: 0;
		overflow: hidden;
		transition: font-size 1s ease;
	}

	nav li {
		float: left;
		padding: 0;
	}

	nav li a:link {
		/*font-weight: bold;*/
		display: block;
		font-size: 1.125em;
		text-align: center;
		padding: 14px 16px 13px 16px;
		text-decoration: none;
	}

	nav li a.menu {
		font-family: "Symboles";
		font-size: 1.5em;
		padding-top: 9px;
		padding-bottom: 9px;
	}

	main {
		font-size: 1.053em;
		line-height: 1.6;
		margin: 0% auto 0% auto;
		padding: 50px 10% 5% 10%;
		word-wrap: break-word;
		text-align:left;
	}

	/* text-underline-offset : FF 70+ / Chrome 87+ (v 98 actuellement)
	* Refaire le hover des vieux avec border-bottom ? */

	a:link, a:visited {
		text-decoration: underline;
		text-underline-offset: 0.1em;
		transition: text-decoration-color 0.2s, text-underline-offset 0.2s;
	}

	a:focus, a:hover {
		/* thickness, à partir de FF 7O uniquement
		voir https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-thickness */
		text-decoration-style: double;
		text-underline-offset: 0.3em;
	}

	/* Pour les navigateurs modernes (Firefox 70+) */
	@supports (text-decoration-thickness: 2px) {
		a:focus, a:hover {
			text-decoration: underline solid 2px;
			text-underline-offset: 0.3em;
		}
	}

	main li {
		font-size: 0.95em;
		/*color: #383838;*/
		padding: 0em 0em 0.5em 0em;
	}

	img {
		display: block;
		border: 0;
		height: auto;
		max-width: 100%;
		outline: none;
		margin-left: auto;
		margin-right: auto;
	}

	hr {
		border: 0;
		border-top: 1px solid #E0E0E0;
		width: 70%;
	}

	h1, h2 {
		text-align: center;
	}

	h1 {
		font-size: 1.5em;
		margin: 0 0 0.83em 0;
		padding: 1.85em 0em 0em 0em;
	}

	h2 {
		font-size: 1.17em;
		margin: 1em 0;
		padding: 0em 0em 3em 0em;
	}


	h3 {
		font-size: 1.05em;
		margin: 1.33em 0;
		padding: 0.5em 0em 0em 0em;
	}

	article h4 {
		font-size: 1em;
	}

	article h4::before {
		font-family: "Symboles";
		content: "\2BA9\00A0";
		font-size: 2em;
		vertical-align: -12%;
	}

	article h4 a:link {
		text-decoration: none;
		position: relative;
		border-bottom: 1px solid;
	}

	article h4 a::after {
		content: "";
		position: absolute;
		bottom: -3px;
		left: 0;
		width: 0%;
		border-bottom: 3px solid;
		transition: width 350ms ease-in-out;
	}

	article h4 a:focus::after, article h4 a:hover::after {
		width: 100%;
	}

	main>article>h4 {
		font-size: 0.95em;
		margin: 1.67em 0;
	}

	main>article>h4::before {
		content: "";
	}

	article p {
		font-size: 0.95em;
	}

	pre, code {
		font-family: "Hack", Courier, monospace;
		font-size: 0.8125em;

	}

	pre {
		white-space: pre-wrap;
	}

	code {
		padding: 2px 4px;
		margin: 0;
		border-radius: 3px;
	}

	pre code {
		display: block;
		background-color: #1e1f29;
		color: #eeeeec;
		border-radius: 5px;
		font-size: 0.954em;
		line-height: 1.6;
		margin: 0.5em auto 0.5em auto;
		max-height: 700px;
		overflow: auto;
		word-wrap: normal;
		padding: 1em;
	}

	.scroll {
		box-shadow: 0 2px 4px 0px rgba(0, 0, 0, 0.15);
		white-space: pre;
		overflow-x: scroll;
	}

	/* Pour préserver une indentation correcte */
	pre code::before {
		content: "\0009\0009";
	}

	q {
		quotes: "«\00A0" "\00A0»";
	}

	blockquote {
		background: #e8e8e8;
		border-radius: 1em;
		color: #000000;
		font-size: 0.95em;
		line-height:1.6;
		margin: 2em auto;
		overflow: hidden;
		padding: 1em 1.5em;
		width: 70%;
	}

	caption {
		font-weight: bold;
		padding: 1em 0;
		text-align: center;
	}

	table {
		border-collapse: collapse;
		margin-left: auto;
		margin-right: auto;
		border-spacing: 0;
		empty-cells: show;
		border: 1px solid #cbcbcb;
	}

	table#indexlist {
		font-family: "Hack", courier, monospace;

	}

	td, th {
		border-bottom: 1px solid #cbcbcb;
		font-size: 90%;
		margin: 0;
		overflow: visible;
		background-color: transparent;
		padding: 0.5em 1em;
	}

	td {
		text-align: center;
	}

	td:first-child {
		text-align: left;
	}

	td.indexcolname {
		text-align: left;
	}

	footer {
		font-size: 0.95em;
		font-style: italic;
		line-height: 1.6;
		margin: 0 auto 0 auto;
		padding: 0% 10% 5% 10%;
		word-wrap: break-word;
		text-align: left;
	}
}

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

	body {
		margin-left: 5px;
	}

	nav {
		height: 44px;
		width: 120%;
	}

	nav ul {
		font-size: 0.70em;
		transition: font-size 1s ease;
	}

	nav li a:link {
		padding: 14px 10px;
	}

	nav li a.menu {
		font-size: 1.607em;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	main {
		font-size: 0.95em;
	}
}

/* Couleurs pour le mode clair
Certains navigateurs ne semble pas prendre light par défaut :
On passe donc le no-preference au cas où — Il doit être normalement déprécié */
@media only screen and (prefers-color-scheme: light) /*or (prefers-color-scheme: no-preference)*/ {
	body {
		color: #303030;
		/*background-color: #353c45;*/
	}

	nav {
		box-shadow: 0 2px 4px 0px rgba(0, 0, 0, 0.15);
	}

	nav ul {
		/*background-color: #353c45;*/
		background-color: #FFF;
	}

	nav li a:link {
		color: #383838;
	}

	nav li a:visited {
		color: #383838;
	}

	nav li a:focus, nav li a:hover {
		color: #d7d7d7;
		background-color: #555555;
	}

	main {
		/*background-color: #353c45;*/
		background-color: #FFF;
	}

	a:link, a:visited {
		color: #0050b3;
	}

	a:focus, a:hover {
		/*color: #2067c8;*/
		color: #0050b3;
		text-decoration-color: darkblue;
	}

	main li {
		color: #383838;
	}

	h2, h3, h4, h5, h6 {
		color: #505050;
	}

	h1 {
		color: #707070;
	}

	article h4 a:link {
		color: #505050;
	}

	article h4 a:visited {
		color: #505050;
	}

	article p {
		color: #383838;
	}

	code {
		background-color: #eaebeb;
	}

	thead {
		background-color: #e0e0e0;
		color: #000;
	}

	tr:nth-child(2n) td {
		background-color: #f2f2f2;
	}
}

/* Couleurs pour le mode sombre */

@media only screen and (prefers-color-scheme: dark) {
	body {
		color: #FFF;
		/*background-color: #353c45;*/
		background-color: #424244;
	}

	nav {
		box-shadow: 0 2px 4px 0px rgba(0, 0, 0, 0.3);
	}

	nav ul {
		/*background-color: #353c45;*/
		background-color: #424244;
	}

	nav li a:link {
		color: #f2f2f2;
	}

	nav li a:visited {
		color: #f2f2f2;
	}

	nav li a:focus, nav li a:hover {
		background-color: #f2f2f2;
		color: #232323;
	}

	main {
		/*background-color: #353c45;*/
		background-color: #424244;
	}

	a:link, a:visited {
		color: #ccff00;
	}

	a:focus, a:hover {
		/*color: #2067c8;*/
		color: #ccff00;
		text-decoration-color: #33cc33;
	}

	img {
		background-color: #e8e8e8;
		color: #383838;
	}

	h2, h3, h4, h5, h6 {
		color: #f9f9f9;
	}

	h1 {
		color: #fafafa;
	}

	article h4 {
		color: #f2f2f2;
	}

	article h4 a:link {
		color: #f2f2f2;
	}

	article h4 a:visited {
		color: #f2f2f2;
	}

	article p {
		color: #FFF;
	}

	code {
		background-color: #181b1b;
	}

	thead {
		background-color: #303030;
		color: #f2f2f2;
	}

	tr:nth-child(2n) td {
		background-color: #505050;
	}
}

@media only print {

	/* En fonction des paramètres d'impressions, il est possible que les background-color ne soient pas pris en compte */
	/* Le menu n'a pas a être imprimé */
	nav {
		display: none;
	}

	/* Éléments nécessitant une présentation spécifique */

	body {
		font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
		width: auto;
		margin: 0 5%;
		padding: 0;
		border: 0;
		float: none;
		background: transparent;
	}

	main {
		color: black;
		font-size: 10pt;
	}

	h1, h2 {
		text-align: center;
	}
	h1 {
		font-size: 16pt;
		margin: 0.83em 0;
	}

	h2 {
		font-size: 14pt;
		margin: 1em 0;
	}


	h3 {
		font-size: 12pt;
		margin: 1.33em 0;
	}

	h4 {
		font-size: 10pt;
		margin: 1.67em 0;

	}

	pre, code {
		white-space: pre-wrap;
		font-size: 7.5pt;
	}

	pre code {
		display: block;
		border: 1px solid;
		border-radius: 5px;
		line-height: 1.6;
		margin: 0.5em auto 0.5em auto;
		max-height: 700px;
		overflow: auto;
		word-wrap: normal;
		padding: 1em;
		text-align:left;
	}

	/* Pour préserver une indentation correcte */
	pre code::before {
		content: "\0009\0009";
	}

	img {
		display: block;
		break-before: auto;
		border: 0;
		height: 100%;
		width: 100%;
		outline: none;
		margin-left: auto;
		margin-right: auto;
	}


	a {
		text-decoration: none;
		color: #000000;
		font-weight: normal;
		font-style: normal;
	}

	a::after {
		content: " [" attr(href) "] ";
	}

	q {
		quotes: "«\00A0" "\00A0»";
	}

	blockquote::after {
		content: " [ Extrait de : " attr(cite) " ] ";
	}

	caption {
		font-weight: bold;
		padding: 1em 0;
		text-align: center;
	}

	table {
		border-collapse: collapse;
		margin-left: auto;
		margin-right: auto;
		border-spacing: 0;
		empty-cells: show;
		border: 1px solid #cbcbcb;
	}

	table#indexlist {
		font-family: courier, monospace;
	}

	td, th {
		border-bottom: 1px solid #cbcbcb;
		font-size: 90%;
		margin: 0;
		overflow: visible;
		background-color: transparent;
		padding: 0.5em 1em;
	}

	td {
		text-align: center;
	}

	td:first-child {
		text-align: left;
	}

	td.indexcolname {
		text-align: left;
	}

	thead {
		background-color: #e0e0e0;
		color: #000;
	}

	tr:nth-child(2n) td {
		background-color: #f2f2f2;
	}


	footer p {
		font-size: 9pt;
		font-style: italic;
	}
}