:root {
  --sombre:#333;
  --clair:#fff;
  --bleu:blue;
  --violet:purple;
  --rouge:red;
}
html {
  background:var(--clair);
  scroll-behavior:smooth;
}
body {
  color:var(--sombre);
  background:var(--clair);
  max-width:70ch;
  margin:auto;
  font:1.2rem/1.5 'Luciole',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif;
}
header::after,
footer::before {
  content:'';
  display:block;
  width:320px;
  height:0;
  border:1px solid #999;
}
header::after {
  margin-top:1.5em;
  margin-bottom:3em;
}
footer::before {
  margin-top:3em;
  margin-bottom:2em;
}
h1,
h2,
h3,
h4 {
  line-height:1.2;
  font-family:monospace;
}
p,
ul {
  margin-bottom:2em;
}
dd,
li {
  margin-top:.3em;
  margin-bottom:.5em;
}
span[title] {
  cursor:pointer;
  text-decoration:underline dotted;
}
[lang="en"] {
  font-style:italic;
}
a {
  color:var(--bleu);
}
a:hover {
  text-decoration:none;
}
a::after {
  font-family:monospace;
}
a[target="_blank"]::after {
  content:'↗';
}
a[target="_self"]::after {
  content:' →';
}
img {
  max-width:100%;
}
.nomDuSite a {
  color:var(--sombre);
  text-decoration:none;
  font-weight:bold;
}
.nomDuSite a:hover {
  color:var(--bleu);
}
#menu ul {
  display:flex;
  flex-wrap:wrap;
  list-style:none;
  gap:2ch;
  align-items:baseline;
  padding:0;
  margin:1em 0;
}
#menu ul li {
  padding:0;
}
#menu ul li a {
  color:var(--sombre);
}
#menu ul li a:hover {
  color:var(--bleu);
}
.grille--3 ul {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1em;
  list-style:none;
  margin:0;
  padding:0;
}
.grille--3 ul li {
  margin:0;
}
[class^="ei"],
[class*="ei"] {
  display:inline-block;
  font:.9em monospace;
  padding:0 1ch;
}
.ei--a {
  color:#000;
  background:#2E9B43;
}
.ei--b {
  color:#000;
  background:#34BC6E;
}
.ei--c {
  color:#000;
  background:#cadd00;
}
.ei--d {
  color:#000;
  background:#f7ed00;
}