@charset "utf-8";

* {
	box-sizing: border-box;
}

:root {
	font-family: "Roboto";
}

body {
	counter-reset: h2 h3 h4;
	margin: 0px;
	padding: 0px;
	margin-top: 200px;
	overflow-y: scroll; -
	-size: 5px; -
	-color1: #fff5e2; -
	-color2: #fffae8;
	background: linear-gradient(45deg, var(- -color1) 25%, var(- -color2)
		25%, var(- -color2) 50%, var(- -color1) 50%, var(- -color1) 75%,
		var(- -color2) 75%);
	background-size: var(- -size) var(- -size);
}

abbr {
	font-weight: bold;
	font-style: italic;
}

.chapnum {
	background: cornflowerblue;
	color: white;
	border-radius: 50%;
	padding: 15px 10px 10px 10px;
	margin-inline-end: 10px;
}

del {
	text-decoration: line-through;
	text-decoration-style: wavy;
	text-decoration-color: indianred;
}

.ref {
	font-style: italic;
}

/*
=========== Iframes ============
*/
iframe {
	border: none;
	margin-left: auto;
	margin-right: auto;
	display: block;
	margin-bottom: 50px;
	max-width: 100%;
}

* iframe[src^="//jsfiddle.net"] {
	border: #c00 1px solid;
	box-shadow: 4px 4px 14px gray;
	width: 100%;
}

/*
============= Images ===========
*/
img.full {
	width: 100%;
}

.capture_ecran {
	max-width: 100%;
	display: block;
	padding: 1px;
	/*border: thin solid black;*/
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0
		rgba(0, 0, 0, 0.19);
}

img {
	margin: 30px auto 60px auto;
	display: block;
}

img.cadre {
	padding: 1px;
	/*border: thin solid black;*/
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0
		rgba(0, 0, 0, 0.19);
	border-radius: 15px;
}

.cadre_bd {
	border-radius: 5px;
	border: solid 2px;
}

/*
============= Tableaux ===========
*/
table {
	margin: auto;
	text-align: center;
}

thead {
	background-color: cornflowerblue;
	color: white;
}

th {
	padding: 7px;
}

tbody tr:nth-child(2n) {
	background-color: aliceblue;
}

table.css_properties td {
	text-align: left;
	padding: 5px;
}

table.css_properties td:first-child {
	font-family: monospace;
	font-weight: bold;
	color: darkblue;
}

table.css_properties td:nth-child(3) {
	font-size: 90%;
}

table.css_properties td:nth-child(2) {
	font-family: monospace;
}

table.css_properties p {
	padding: 0px;
	margin: 0px;
}

table.css_properties a {
	font-family: sans-serif;
	font-size: 90%;
	/*color: cornflowerblue;*/
}

table.css_properties ul, table.css_properties li {
	margin: 0;
	padding: 0;
}

table.css_properties td:nth-child(3) li {
	margin-left: 20px;
}

table.css_properties td:nth-child(2) li {
	display: block;
}

/*
https://stackoverflow.com/questions/17534661/make-anchor-link-go-some-pixels-above-where-its-linked-to
*/
table#transformations td:nth-child(2) {
	font-family: monospace;
	font-size: 1.1em;
	color: cornflowerblue;
	font-weight: bold;
}

/*
============= Polices personnalisées =============
*/
@font-face {
	font-family: "arciform";
	src: url("../fonts/Arciform.otf") format("truetype");
}

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

@font-face {
	font-family: "Calendas";
	src: url("../fonts/Calendas_Plus.otf") format("truetype");
}

header {
	position: fixed;
	z-index: 10;
	top: 0px;
	left: 0px;
	right: 0px;
	margin: 0px;
	padding: 0px;
	display: flex;
	flex-direction: column;
	margin-bottom: 200px;
	text-align: center;
}

#cache {
	max-width: 1000px;
	margin: 0px auto 0px auto;
	position: fixed;
	z-index: 9;
	top: 0px;
	width: 100%;
	background: white;
	height: 130px;
	clip-path: polygon(0% 0%, 100% 0%, 100% 200%, 0% 200%);
	box-shadow: 0 0 50px 50px white;
	/*clip-path: fill-box;*/
	/* https://stackoverflow.com/questions/2005954/center-a-positionfixed-element*/
	left: 0;
	right: 0;
}

main li {
	padding: 5px;
}

main {
	display: block;
	max-width: 1000px;
	margin: -80px auto 0px auto;
	padding: 80px 50px 20px 50px;
	background: white;
}

main em {
	background-color: cornsilk;
	font-style: italic;
}

main blockquote {
	margin: 30px;
	margin-left: calc(50px + 10%)
}

main blockquote p {
	text-align: justify;
	padding: 0px 20px;
	margin: 0px;
	margin-bottom: 10px;
	font-style: italic;
	border-left: solid cadetblue;
	color: gray;
	background-color: #f7fafa;
}

main blockquote p::before {
	content: '« ';
	color: cadetblue;
}

main blockquote p::after {
	content: ' »';
	color: cadetblue;
}

main cite {
	display: block;
	text-align: right;
	width: 100%;
	margin: 0px;
	padding: 0px;
	color: gray;
	color: cadetblue;
}

main blockquote+cite {
	margin-top: -20px;
}

footer {
	display: flexbox;
	flex-direction: row-reverse;
	background: repeating-linear-gradient(45deg, #606dbc, #606dbc 10px, cornflowerblue
		10px, #465298 20px);
	color: aliceblue;
	padding: 5px;
	font-size: small;
	padding: auto;
	text-align: center;
	/*max-width: 1000px;
    margin: 0px auto 0px auto;*/
}

footer::before {
	content:
		'Copyleft 2018 - Nicolas Pourcelot. Document publié selon les termes de la licence de documentation libre GNU (Gnu Free Document License).'
}

/*
============= Titres ============
*/
h1 {
	padding: 20px;
	background-color: #edf8ff;
	border-top: solid cornflowerblue 4px;
	border-bottom: dashed cornflowerblue 2px;
	text-align: center;
	font-family: Calendas;
	font-weight: 100;
	color: cornflowerblue;
}

h2 {
	counter-increment: h2;
	counter-reset: h3 h4;
	background-color: #ffe9ce;
	color: #a77126;
	padding: 0px;
	border-bottom: solid #d79330 4px;
	border-top: solid #d79330 1px;
	margin: 100px 0px 30px 0px;
	border-radius: 15px 0px 15px 0px;
}

h2::before {
	content: " " counter(h2, upper-roman) " ";
	color: white;
	background-color: #d79330;
	margin: 0px;
	padding: 12px 19px 12px 19px;
	display: inline-block;
	margin-right: 20px;
	border-radius: 15px 0px 15px 0px;
}

h3 {
	counter-increment: h3;
	counter-reset: h4;
	color: cornflowerblue;
	margin: 70px 0px 30px 0px;
}

h2+h3 {
	margin-top: 50px;
}

h3::before {
	content: counter(h2, upper-roman) '.' counter(h3) " - ";
}

h4 {
	counter-increment: h4;
	color: darkmagenta;
	margin: 50px 0px 20px 0px;
}

h3+h4 {
	margin-top: 30px;
}

h4::before {
	content: counter(h2, upper-roman) '.' counter(h3) '.'
		counter(h4, lower-alpha) " - ";
}

h4+h5 {
	margin-top: 30px;
}

h5 {
	color: #8b008b;
	font-style: italic;
	font-size: 100%;
	margin-top: 50px;
}

/*
============ Navigation ===========
*/
.anchor {
	position: relative;
}

.anchor a {
	position: absolute;
	top: -190px;
	visibility: hidden;
}

header {
	pointer-events: none;
}

#sommaire nav {
	pointer-events: auto;
}

#sommaire ol {
	list-style-type: none;
	counter-reset: item;
	margin: 0;
	padding: 0;
}

/*#sommaire > ol {
    padding: 10px;
}*/
#sommaire li {
	display: table;
	counter-increment: item;
	margin-bottom: 0.6em;
	color: #a0740a;
	font-weight: 600;
}

#contenu_sommaire>ol>li {
	padding: 10px;
}

#contenu_sommaire>ol>li:hover {
	background-color: rgba(255, 185, 63, 0.05);
	border-radius: 20px;
}

#contenu_sommaire a:hover {
	background-color: #a0740a;
	color: white;
	border-radius: 5px;
}

#sommaire li a {
	color: #a0740a;
	text-decoration: none;
}

#sommaire li:before {
	content: counter(item, upper-roman) ". ";
	display: table-cell;
	padding-right: 0.6em;
}

#sommaire li li {
	margin: 0;
	font-weight: 400;
}

#sommaire li li:before {
	content: counters(item, ".") " ";
}

#sommaire li li li {
	font-size: 95%;
}

#sommaire li li li:before {
	content: counter(item, lower-alpha) ". ";
}

.hfill {
	flex: 2;
}

#sommaire h6 {
	font-size: large;
	margin: 0px;
	color: white;
	background-color: cornflowerblue;
	/*darkblue;*/
	padding: 10px;
	transform: rotate(180deg);
	/*writing-mode: vertical-rl;*/
	border-radius: 0px 30px 30px 0px;
	border-left: solid 4px #edf8ff /*#a77126*/;
	text-align: center;
	display: flex;
	align-items: flex-end;
}

#sommaire h6 img {
	width: 20px;
	margin: 10px 0;
	transform: rotate(180deg);
}

#sommaire {
	display: flex;
	/*background-color:#fffbf4;*/
	margin: 0px;
	padding: 0px;
	opacity: 1;
	justify-content: flex-end;
	max-height: calc(100vh - 150px);
	/*visibility: hidden;*/
}

#sommaire nav {
	margin: 0px;
	padding: 0px;
	display: flex;
	transform: translate(480px);
}

#contenu_sommaire {
	margin: 0px;
	margin-left: -1px;
	background-color: #fffbf4;
	padding: 20px;
	padding-right: 40px;
	/*display: flex;*/
	width: 500px;
	text-align: left;
	overflow: auto;
}

#sommaire nav:hover {
	transform: translate(0px);
	transition: 0.5s ease-in-out;
}

/*
============= Boîtes d'avertissement =============
*/
.todo, .memo, .warn {
	border-radius: 20px;
	padding: 20px;
	margin: 50px;
}

.todo strong::before, .memo strong::before, .warn strong::before {
	display: inline-block;
	height: 35px;
	width: 35px;
	/*transform:translate(-50px);*/
	background-image: url(../img/crayon_.svg);
	background-repeat: no-repeat;
	background-size: 100%;
	content: "";
	margin-right: 10px;
	transform: translate(0px, 5px);
}

.todo strong, .memo strong, .warn strong {
	font-family: arciform;
	font-weight: normal;
	font-size: x-large;
	border: none;
	background-color: inherit;
	text-align: left;
	margin: 0px 10px;
	padding: 0px 10px;
}

.todo em, .memo em, .warn em {
	background-color: inherit;
	font-weight: bold;
	font-style: normal;
	/*color:#696969;*/
}

.todo li, .memo li, .warn li {
	list-style: none;
	margin-right: 10px;
	margin-left: 15px;
	display: block;
}

.todo li::before, .memo li::before, .warn li::before {
	content: '\2605';
	display: inline-block;
	margin-right: 15px;
	width: 10px;
	margin-left: -25px;
	color: #696969;
}

main ol>li {
	list-style: none;
}

main ol {
	counter-reset: olcounter;
}

main ol>li::before {
	counter-increment: olcounter;
	content: counter(olcounter) " - ";
}

.todo ol>li, .memo ol>li, .warn ol>li {
	display: block;
}

.todo ol>li::before, .memo ol>li::before, .warn ol>li::before {
	content: counter(olcounter);
	background-color: white;
	border-radius: 20px;
	height: 20px;
	width: 20px;
	flex: none;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	font-size: 10pt;
	font-weight: bold;
}

#index_menu ol>li {
	counter-increment: olcounter;
	display: flex;
	justify-content: left;
	align-items: center;
	padding: 4px;
}

#index_menu ol>li::before {
	content: "TD" counter(olcounter);
	border-radius: 20px;
	background-color: cadetblue;
	height: 20px;
	width: 20px;
	color: white;
	padding: 4px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 10px;
	font-weight: bold;
}

#index_menu a {
	margin-left: 10px;
	text-decoration: none;
	text-decoration-color: lightgray;
	color: cadetblue;
	padding: 10px;
}

#index_menu a:hover {
	background-color: antiquewhite;
	color: darkgoldenrod;
	border-radius: 20px;
	/*text-decoration: underline;
    text-decoration-style: wavy;*/
}

#index_menu li:hover::before {
	background-color: darkgoldenrod;
	/*text-decoration: underline;
    text-decoration-style: wavy;*/
}

.todo i, .memo i, .warn i {
	background-color: inherit;
}

.todo b, .memo b, .warn b {
	background-color: inherit;
}

.memo {
	background-color: #FFF4C9;
}

.memo strong {
	color: #696969;
}

.todo img, .warn img, .memo img {
	margin-top: 0px;
	margin-bottom: 0px;
}

.warn {
	background-color: #c6623d;
	color: white;
	animation: warnanimation 20s alternate infinite;
}

.warn strong {
	color: white;
}

.warn strong::before {
	background-image: url(../img/danger_blanc_.svg);
}

.warn i {
	color: white;
	font-size: 1.1em;
	/*background-color: darkred;*/
}

.todo {
	background-color: aliceblue;
}

.todo strong {
	color: #696969;
}

.todo strong::before {
	background-image: url(../img/pc4_.svg);
}

main i {
	font-style: normal;
	font-family: monospace;
	background-color: aliceblue;
	font-size: medium;
	color: cornflowerblue;
}

main b {
	font-style: normal;
	font-family: monospace;
	background-color: aliceblue;
	font-size: medium;
	color: cornflowerblue;
}

main b::before {
	content: '<';
}

#index {
	font-variant: small-caps;
	display: flex;
}

#index a {
	color: white;
	text-decoration: none;
	pointer-events: auto;
	background: cornflowerblue;
	display: block;
	padding: 5px 20px;
	margin: 0px;
	margin-left: 20px;
	margin-top: -24px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

#index a:hover {
	background: #0054ea;
}

main b::after {
	content: '>';
}

@
keyframes warnanimation { 0% {
	background-color: #c6623d;
}

100%
{
background-color
:
 
#2a2156
;

    
}
}
.todo strong i {
	font-size: x-large;
}

.todo ul img {
	margin-top: 10px;
	margin-bottom: 10px;
}