body {
  font-size: 1em;
  line-height: 1.40;
  background: var(--backgroundcolor);
  color: var(--textcolor);
  padding: 0 5vw;
  margin: 0;
}

/* si ecran plus large que 600px la font-size devient + grande*/
@media (min-width: 600px) {
  body {
    font-size: 1.1em
  }
}

:root,
:root[data-force-color-mode="light"] {
  color-scheme: light dark;
  --textcolor: #3647a0;
  --bordercolor: rgb(255, 255, 255);
  --accentcolor: #b7ff89;
  --backgroundcolor: #ffffff;
  --grad: radial-gradient(#b7ff89, white);
}


/* Thème sombre : obligation de dupliquer dans @media les règles ci-dessus */
@media (prefers-color-scheme: dark) {
  :root {
    --textcolor: #3647a0;
    --bordercolor: rgb(255, 255, 255);
    --accentcolor: white;
    --backgroundcolor: #3647a0;
    --font-wght: 280;
    --grad: radial-gradient(#2f3e8a, #3647a0)
  }
}

/* Thème sombre */
:root[data-force-color-mode="dark"] {
  --textcolor: #ffffff;
  --bordercolor: rgb(255, 255, 255);
  --accentcolor: #b7ff89;
  --backgroundcolor: #3647a0;
  --font-wght: 280;
  --grad: radial-gradient(#2f3e8a, #3647a0)
}

/* si largeur - que 1000px, couleur gradient change*/
@media (max-width: 1000px) {
  body {
    background: var(--grad);
  }
}


.wild {
  font-family: "DM Sans";
  font-size: 1.5em;
  margin: 0 -5vw;
  padding: 1em;
  text-transform: uppercase;
  position: sticky;
  background: var(--backgroundcolor);
  top: 0;
}

a {
  color: currentColor;
}



nav {
  font-family: "DM Sans";
  color: #b7ff89;
}

.top-nav {
  border-bottom: 1px solid var(--bordercolor);
  margin: 0 -5vw;
  padding: 1em;
  text-transform: uppercase;
  position: sticky;
  top: 0;
  background: #3647a0;
}

.top-nav a {
  text-decoration: none;
  letter-spacing: .05em;
}


main {
  font-family: "DM Sans";

}

header {
  hyphens: none;
  
}

header h1 {
  font-family: "Avara";
padding: 9vw 0;
} 

h1 {
  font-family: "Avara";
  font-size: clamp(1.5em, 9vw, 4em);
}

h2 {
  font-family: "Avara";
  font-size: 2.5em;
}

h3 {
  font-size: 1.5em;
  font-family: "Avara";
}

.subtitle {
  text-transform: lowercase;
}

.pre{
  font-family: "Xanh mono";
  color:#b7ff89;
  text-align: center; 
  font-size: 1.2em;
  padding: 0 0 1.5em ;
  background-color: #3647a0;
  margin: 0 -5vw;
}

.authors {
  font-family: "Xanh mono";
text-align: center;
  color: #b7ff89;
  font-size: 1.3em;
  background: #3647a0;
  margin: 0 -5vw;
  padding:  1em  5vw 1em 0;
}


.keywords {
  font-family: "Xanh mono";
  font-style: italic;
  max-width: 70ch;
}

.keywords a {
  text-underline-offset: 0.15em;
  text-decoration-color: color-mix(in srgb, currentColor, transparent 50%);
}

.epigraphe {
  font-family: "DM Sans";
  font-style: italic;
}

.text {
  max-width: 70ch;
  color: var(--textcolor);
}

.quote {
  font-family: "DM Sans";
  font-style: italic;
}

.text p {}

.text .quote {}

.readmore {
  padding: 0 7vw;
}

.biography {
  font-family: "Xanh Mono";
}

.footnotes {
  font-family: "DM Sans";
  font-style: italic;
}

#footer {
  display: flex;
  flex-direction: column;
}

#footer>* {
  padding: 1.6em 1em;
}

.articles-prev-next {
  display: flex;
  gap: 1em;
  justify-content: space-between;
  border-bottom: 1px solid var(--bordercolor);
}

@media (max-width:800px) {
  .prevnext {
    display: flex;
    justify-content: space-between;
  }

  .prevnext a {
    position: static;
    transform: none;
  }
}

.footer {}

table {
  border-collapse: collapse;
}