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


/* 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;
    --hover: #ff88554d;
    --font-wght: 280;
  }
}

/* Thème sombre */
:root[data-force-color-mode="dark"] {
  --textcolor: #f2f7ed;
  --bordercolor: #f2f7ed;
  --accentcolor: #ff8855;
  --backgroundcolor: #1C4067;
  --tiretcolor: #f2f7ed;
  --hover: #ff88554d;
  --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: clamp(5rem, 15vw, 15rem);
  margin-bottom: auto;
  transition: background-color 0.5s ease, color 0.5s ease;
}

h2 {
  font-family: 'Figtree';
  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;
}

.titre {
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bulle {
  background-color: var(--accentcolor);
  border-radius: 12px;
  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;
}


.dropdown {
  position: fixed;
  top: 10px;
  left: 0;
  z-index: 1000;
}

.mainmenubtn {
  color: var(--textcolor);
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  padding: 12px 16px;
  position: relative;
  z-index: 1001;
  transition: background-color 0.5s ease, color 0.5s ease;
}

.dropdown-child {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 240px;
  border: 7px double var(--accentcolor);
  border-left: none;
  border-radius: 0 12px 12px 0;
  transform: translateX(-100%);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.dropdown-child.show {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

.dropdown-child a {
  display: block;
  padding: 12px 16px;
  color: var(--textcolor);
  text-decoration: none;
}

.dropdown-child a:not(:last-child) {
  border-bottom: 1px solid var(--accentcolor);
}

.dropdown-child a:hover {
  background-color: var(--hover);
}