body {
	font-family: "Avenir Next", -apple-system, BlinkMacSystemFont, Avenir,
    "Nimbus Sans L", Roboto, "Noto Sans", "Segoe UI", Arial, Helvetica,
    "Helvetica Neue", sans-serif;
	padding:1em;
	margin:auto;
	max-width:55em;
	background:#fefefe;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: bold;
	color: var(--primary);
}

h1 {
	font-size: 28pt;
}

h2 {
	border-bottom: 1px dashed #CCCCCC;
	font-size: 24px;
	margin-top:2.5em;
	padding-bottom:0.25em;
}

h3 {
	font-size: 18px;
	margin-top:2em;
}

h4 {
	font-size: 16px;
}

h5 {
	font-size: 14px;
}

h6 {
	color: #777777;
	background-color: inherit;
	font-size: 14px;
}

hr {
	height: 0.2em;
	border: 0;
	color: #DDDDDD;
	background-color: #DDDDDD;
	border-radius: 5px;
	text-align:center;
	width:50%;
	margin-top: 2em;
	margin-bottom: 2em;
}

p, blockquote, ul, ol, dl, li, table, pre {
	margin: 15px 0;
}

blockquote {
  padding-left: 20px;
  border-left: 5px solid gray;
  font-weight:lighter;
}

img {
	max-width: 100%;
	border-radius: 5px;
}

table {
	border-collapse: collapse;
	width: 100%;
}

table, th, td {
	border: 1px solid #EAEAEA;

	border-radius: 3px;
	padding: 5px;
}

tr:nth-child(even) {
  background-color: #F8F8F8;
}

a, a:visited {
	color: #4183C4;
	background-color: inherit;
	text-decoration: none;
}

button, #ws {
	font-size: 10pt;
	padding: 4px 6px;
	border-radius: 5px;
	border: 1px solid #bbb;
	background-color: #eee;
}

code, pre, #ws, #message {
	font-family: Monaco, monospace;
	font-size: 10pt;
	border-radius: 3px;
	background-color: #F8F8F8;
	color: inherit;
}

code {
	border: 1px solid #EAEAEA;
	margin: 0 2px;
	padding: 0 5px;
}

pre {
	border: 1px solid #CCCCCC;
	overflow: auto;
	padding: 4px 8px;
}

pre > code {
	border: 0;
	margin: 0;
	padding: 0;
}

/* Accordeon */

details {
	text-align:left;
}

slot:not([name]) {
  display: none;
}
:host([open]) slot:not([name]) {
  display: revert;
}

summary {
  display: list-item;
  counter-increment: list-item 0;
  list-style: disclosure-closed inside;
}
:host([open]) summary {
  list-style-type: disclosure-open;
}

@media (max-width: 500px) {
	#table-of-contents {display: none;}
	body{
		margin-left:auto;
	}
}

/* Entête, pied de page, menu et recherche */

:root {
	--primary: #34495e;
	--secondary: #85929e;
	--terciary: #d6dbdf;
}

header {
    background-color: var(--primary);
    padding: 10px;
    text-align: center;
    border-radius: 5px;
    border-bottom: 3px solid rgba(0, 0, 0, 0.3);
    margin-top: 10px;
}

header h2 {
    color: #FFFFFF;
    padding: 10px;
    margin: 10px;
    border-bottom: none;
}

footer {
    background-color: var(--terciary);
    padding: 10px;
    text-align: center;
    margin-top:75px;
    border-radius: 5px;
    border-bottom: 3px solid rgba(0, 0, 0, 0.3);
    margin-bottom: 10px;
}

nav {
    text-align: center;

}

nav ul {
    display: inline-flex;
    flex-flow: row wrap;
    list-style : none;
    padding:0;
    text-align: center;
}

nav ul li {
    margin: 5px;
    padding: 5px 10px;
    background-color: var(--secondary);
    border-radius: 5px;
    border-bottom: 3px solid rgba(0, 0, 0, 0.3);
}

nav ul li a, nav ul li a:visited {
    text-decoration : none;
    color: #ffffff;
}

.champRecherche {
	width: calc(80% - 10px);
	margin-left: 10%;
	font-size: 1.5em;
}

#resultatsRecherche {
  list-style: none;
  display: grid;
  margin: 5px;
  padding: 5px;
  grid-template-columns: 1fr 1fr;
}

#resultatsRecherche a {
  text-decoration: none;
}

#resultatsRecherche li {
  margin: 5px;
  padding: 5px;
  background-color: #ebf2fa;
  border-left: 3px solid var(--accent);
}