@font-face {
  font-family: "/assets/fonts/Luciole ";
  src: url("/assets/fonts/Luciole -Regular.eot"); /* IE9 Compat Modes */
  src:
    url("/assets/fonts/Luciole -Regular.eot?#iefix") format("embedded-opentype"),
    /* IE6-IE8 */ url("/assets/fonts/Luciole -Regular.woff") format("woff"),
    /* Modern Browsers */ url("/assets/fonts/Luciole -Regular.ttf")
      format("truetype"),
    /* Safari, Android, iOS */
      url("/assets/fonts/Luciole -Regular.svg#Luciole -Regular") format("svg"); /* Legacy iOS */
  font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}
@font-face {
  font-family: "/assets/fonts/Luciole ";
  src: url("/assets/fonts/Luciole -Bold.eot"); /* IE9 Compat Modes */
  src:
    url("/assets/fonts/Luciole -Bold.eot?#iefix") format("embedded-opentype"),
    /* IE6-IE8 */ url("/assets/fonts/Luciole -Bold.woff") format("woff"),
    /* Modern Browsers */ url("/assets/fonts/Luciole -Bold.ttf")
      format("truetype"),
    /* Safari, Android, iOS */
      url("/assets/fonts/Luciole -Bold.svg#Luciole -Bold") format("svg"); /* Legacy iOS */
  font-style: normal;
  font-weight: bold;
  text-rendering: optimizeLegibility;
}
@font-face {
  font-family: "/assets/fonts/Luciole ";
  src: url("/assets/fonts/Luciole -Italic.eot"); /* IE9 Compat Modes */
  src:
    url("/assets/fonts/Luciole -Italic.eot?#iefix") format("embedded-opentype"),
    /* IE6-IE8 */ url("/assets/fonts/Luciole -Italic.woff") format("woff"),
    /* Modern Browsers */ url("/assets/fonts/Luciole -Italic.ttf")
      format("truetype"),
    /* Safari, Android, iOS */
      url("/assets/fonts/Luciole -Italic.svg#Luciole -Italic") format("svg"); /* Legacy iOS */
  font-style: italic;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}
@font-face {
  font-family: "/assets/fonts/Luciole ";
  src: url("/assets/fonts/Luciole -BoldItalic.eot"); /* IE9 Compat Modes */
  src:
    url("/assets/fonts/Luciole -BoldItalic.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("/assets/fonts/Luciole -BoldItalic.woff") format("woff"),
    /* Modern Browsers */ url("/assets/fonts/Luciole -BoldItalic.ttf")
      format("truetype"),
    /* Safari, Android, iOS */
      url("/assets/fonts/Luciole -BoldItalic.svg#Luciole -BoldItalic")
      format("svg"); /* Legacy iOS */
  font-style: italic;
  font-weight: bold;
  text-rendering: optimizeLegibility;
}
/* Ces fontes sont distribuées gratuitement sous Licence publique Creative Commons Attribution 4.0 International :
https://creativecommons.org/licenses/by/4.0/legalcode.fr
These fonts are freely available under Creative Commons Attribution 4.0 International Public License:
https://creativecommons.org/licenses/by/4.0/legalcode
Luciole © Laurent Bourcellier & Jonathan Perez

Le caractère typographique Luciole a été conçu spécifiquement pour les personnes malvoyantes. 
Ce projet est le résultat de plus de deux années de collaboration entre le Centre Technique Régional pour la Déficience Visuelle 
et le studio typographies.fr. Le projet a bénéficié d'une bourse de la Fondation suisse Ceres et de l'appui du laboratoire DIPHE 
de l'Université Lumière Lyon 2.
 */

*,
::before,
::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow-x: hidden;
  font-family: "Luciole", sans-serif;
  scroll-behavior: smooth;
}
html::-webkit-scrollbar {
  display: none;
}
:root {
  --grey: #bbc6ce;
  --greenTxt: rgb(37, 157, 80);
  --green: rgb(28, 120, 62);
  --lowgreen: rgba(37, 157, 81, 0.92);
  --lowergreen: rgba(37, 157, 81, 0.5);
  --darkgreen: rgb(28, 120, 62);
  --red: #ce061f;
  --black: black;
  --white: whitesmoke;
  --realwhite: white;
  --bg1: rgba(245, 245, 245, 0.8);
  --bg2: rgba(255, 255, 255, 0.7);
}
.grey {
  color: var(--grey);
}
.green {
  color: var(--greenTxt);
}
.red {
  color: var(--red);
}

body {
  background-color: var(--green);
}
h1 {
  width: 100dvw;
  background-color: var(--black);
  color: var(--realwhite);
  text-align: center;
  padding: 10px;
  text-transform: uppercase;
}

h2 {
  font-size: 1.3rem;
}
p {
  font-size: 1rem;
}
.subheader {
  max-width: 1200px;
  display: flex;
  justify-content: space-between;
  margin: auto;
  padding-top: 5px;
  color: var(--realwhite);
  padding-left: 10px;
  padding-right: 10px;
}
.subheader a {
  text-decoration: none;
  color: var(--realwhite);
  border: solid 1px var(--realwhite);
  padding: 5px;
  border-radius: 5px;
}
.autor {
  text-align: right;
  font-style: italic;
  color: var(--green);
  margin-bottom: 10px;
}
.resume::first-letter {
  color: var(--red);
  font-weight: bold;
}
.resume {
  text-indent: 20px;
}
li {
  list-style-type: none;
  width: 280px;
  border: 5px solid var(--green);
  display: flex;
  justify-content: center;
  padding-bottom: 10px;
  padding-top: 10px;
  align-items: center;
  background-color: var(--black);
  margin: 10px;
  border-radius: 5px;
}
li figure {
  width: 250px;
  background-color: var(--realwhite);
  border-radius: 5px;
  height: 100%;
  display: flex;
  flex-direction: column;
}
li figcaption {
  padding: 5px;
  height: 255px;
  border-bottom: solid 10px var(--realwhite);
  flex-grow: 1;
}
li img {
  width: 250px;
}
ul {
  display: flex;
  /* max-width: 1500px; */
  background-color: var(--red);
  flex-wrap: wrap;
  justify-content: center;
  border-radius: 20px;
  margin: 5px 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  margin-bottom: 80px;
}
main {
  max-width: 1500px;
  margin: 0 auto;
  background-color: var(--green);
}
.choice {
  display: flex;
  width: 100%;
  justify-content: center;
  gap: 8px;
  margin: 10px 0;
}

button {
  text-align: center;
  text-transform: uppercase;
  padding: 5px 10px;
  font-size: 1.3rem;
  font-weight: bold;
  border: solid 1px var(--bg2);
  border-radius: 10px;
  color: var(--realwhite);
  cursor: pointer;
  background-color: var(--green);
}

.choice .active {
  border: solid 3px var(--red);
  border-radius: 10px;
  background-color: var(--realwhite);
  color: var(--black);
}
.hiden {
  display: none;
}

.up {
  position: fixed;
  bottom: 5px;
  right: calc(1dvw / 4);
  padding: 0;
  background-color: transparent;
}
button.up {
  border: none;
  z-index: 1;
}
footer {
  background-color: var(--green);
  display: flex;
  justify-content: right;
  padding: 10px;
  /* position: fixed;
  bottom: 0; */
  width: 100dvw;
  color: var(--realwhite);
}
footer p {
  font-size: 0.7rem;
  padding-right: 25px;
}