:root,
:root[data-force-color-mode="light"] {
  color-scheme: light dark;
  --textcolor: #c33d03;
  --bordercolor: #c33d03;
  --accentcolor: #1d65a8;
  --backgroundcolor: #f2f7ed;
  --tiretcolor: #c33d03;
}


/* Thème sombre : obligation de dupliquer dans @media les règles ci-dessus */
@media (prefers-color-scheme: dark) {
  :root {
    --textcolor: #f2f7ed;
    --bordercolor: #f2f7ed;
    --accentcolor: #ff8855;
    --backgroundcolor: #1C4067;
    --tiretcolor: #f2f7ed;
    --font-wght: 280;
  }
}

/* Thème sombre */
:root[data-force-color-mode="dark"] {
  --textcolor: #f2f7ed;
  --bordercolor: #f2f7ed;
  --accentcolor: #ff8855;
  --backgroundcolor: #1C4067;
  --tiretcolor: #f2f7ed;
  --font-wght: 280;
}

body {
  background-color: var(--backgroundcolor);
  transition: background-color 0.5s ease, color 0.5s ease;
}

h1 {
  color: var(--textcolor);
  font-family: 'Skranji';
  font-size: 15em;
  position: relative;
  text-align: center;
  margin-top: 0;
  margin-bottom: auto;
  transition: background-color 0.5s ease, color 0.5s ease;
}

h2 {
  font-family: 'Figtree';
  position: relative;
  text-align: center;
  transition: background-color 0.5s ease, color 0.5s ease;
}

h2 a{
  color: currentColor;
  text-decoration: none;
  color: var(--backgroundcolor);
  transition: background-color 0.5s ease, color 0.5s ease;
}

.bulle {
  background-color: var(--accentcolor);
  border-radius: 12px;
  margin-left: 40em;
  margin-right: 40em;
  transition: background-color 0.5s ease, color 0.5s ease;
}

.bulle:hover {
  background-color: var(--textcolor);
}

.theme {
  top: 0;
  margin-top: 1em;
  text-align: center;
  font-family: "Figtree";
  position: relative;
  color: var(--accentcolor);
  transition: color 0.5s;
}
.theme:hover {
  color: var(--textcolor);
}

.theme input,
.theme span {
  display: none;
}

.theme label::before {
  content: 'Clair / Sombre ✦';
}

@media screen and (prefers-color-scheme: dark) {
  .theme label::before {content: 'Sombre ✧';}
}
html[data-force-color-mode="dark"] {
.theme label::before {content: 'Clair ✦';}
}

::-moz-selection {
  background-color: var(--backgroundcolor);
  color: var(--accentcolor);
}

::selection {
  background-color: var(--backgroundcolor);
  color: var(--accentcolor);
}

.authors::-moz-selection {
  background-color: var(--backgroundcolor);
  color: var(--textcolor);
}

.authors::selection {
  background-color: var(--backgroundcolor);
  color: var(--textcolor);
}
span::-moz-selection {
  background-color: var(--backgroundcolor);
  color: var(--textcolor);
}

span::selection {
  background-color: var(--backgroundcolor);
  color: var(--textcolor);
}

.menu {
  position: fixed;
  top: 0;
  left: 1.5em;
}

.list {
  margin-bottom: 5em;
}

li {
  color: var(--textcolor);
}

li a{
  color: currentColor;
  text-decoration: none;
}