@font-face {
    font-family: HelloParisSerifVariable;
    src: url("fonts/Hello Paris Serif Variable-VF.ttf");
}

@font-face {
    font-family: Darleston;
    src: url("fonts/Darleston.otf");
}

@font-face {
    font-family: BookAntiqua;
    src: url("fonts/bookantiqua.ttf");
}

@font-face {
    font-family: BookAntiquaBold;
    src: url("fonts/bookantiqua_bold.ttf");
}

:root {
  --charte-Edimbourg: #724433;
  --charte-CafeLatte: #EAD9CA;
  --charte-Shortbread: #C69B67;
  --charte-RedFox: #C4725F;
  --charte-Highlands: #919981;
  --charte-Coton: #F9F4ED;

  --police-textes: BookAntiqua;
  --police-textes-gras: BookAntiquaBold;
  --police-bandeau: HelloParisSerifVariable;
  --police-sous-bandeau: var(--police-bandeau);
  --police-titre-h1: Darleston;
  --police-titre-h2: BookAntiqua;

  --fond-clair: var(--charte-Coton);
  --couleur-clair: #181818;

  --fond-sombre: #201818;
  --couleur-sombre: #F0F0F0;

  --niveau-gris-aucun: 0%;
  --niveau-gris-moyen: 50%;
  --niveau-gris-total: 100%;

  --contraste-faible: 70%;
  --contraste-normal: 100%;
  --contraste-eleve: 200%;

  --police-fantaisie: HelloParisSerifVariable;
  --police-lisible: BookAntiqua;
  --police-droite: sans-serif;
}

[data-gris="aucun"] {
  --niveau-gris: var(--niveau-gris-aucun);
}
[data-gris="moyen"] {
  --niveau-gris: var(--niveau-gris-moyen);
}
[data-gris="total"] {
  --niveau-gris: var(--niveau-gris-total);
}

[data-contraste="faible"] {
  --niveau-contraste: var(--contraste-faible);
}
[data-contraste="normal"] {
  --niveau-contraste: var(--contraste-normal);
}
[data-contraste="eleve"] {
  --niveau-contraste: var(--contraste-eleve);
}

[data-police="fantaisie"] {
  --police-textes: BookAntiqua;
  --police-textes-gras: BookAntiquaBold;
  --police-bandeau: HelloParisSerifVariable;
  --police-sous-bandeau: var(--police-bandeau);
  --police-titre-h1: Darleston;
  --police-titre-h2: BookAntiqua;
}

[data-police="lisible"] {
  --police-textes: BookAntiqua;
  --police-textes-gras: BookAntiquaBold;
  --police-bandeau: BookAntiquaBold;
  --police-sous-bandeau: var(--police-bandeau);
  --police-titre-h1: BookAntiquaBold;
  --police-titre-h2: BookAntiqua;
}

[data-police="droite"] {
  --police-textes: sans-serif;
  --police-textes-gras: sans-serif;
  --police-bandeau: sans-serif;
  --police-sous-bandeau: var(--police-bandeau);
  --police-titre-h1: sans-serif;
  --police-titre-h2: sans-serif;
}

[data-theme="clair"] {
  --couleur-fond: var(--fond-clair);
  --couleur-textes: var(--couleur-clair);
  --couleur-bandeau-haut-texte: var(--charte-Edimbourg);
  --couleur-bandeau-haut-courant: var(--charte-Shortbread);
  --couleur-sous-bandeau-texte: var(--charte-RedFox);
  --couleur-sous-bandeau-courant: var(--couleur-bandeau-haut-courant);
  --couleur-titres: var(--charte-Edimbourg);
  --couleur-sous-titres: var(--charte-Shortbread);
  --couleur-encadres-fond: var(--charte-CafeLatte);
  --couleur-encadres-bords: var(--charte-Edimbourg);
  --couleur-encadres-titre: var(--charte-RedFox);
  --couleur-encadres-text: var(--couleur-textes);
  --couleur-menu-boutons-fond: var(--couleur-encadres-bords);
  --couleur-menu-boutons-bords: var(--couleur-encadres-fond);
  --couleur-menu-boutons-texte: black;
  --couleur-titre-h1: var(--charte-Highlands);
  --couleur-titre-h2: var(--charte-RedFox);
  --couleur-options-affichage: var(--couleur-textes);
  --couleur-fond-options-affichage: var(--charte-CafeLatte);
  --couleur-cadres-options-affichage: var(--couleur-bandeau-haut-texte);
  --couleur-liens: var(--charte-RedFox, red);
  --couleur-liens-vers-portefolio: var(--charte-Shortbread);
  --couleur-pied-de-page: black;
  --couleur-fond-pied-de-page: var(--charte-Shortbread, red);
}

[data-theme="sombre"] {
  --couleur-fond: var(--fond-sombre);
  --couleur-textes: var(--couleur-sombre);
  --couleur-bandeau-haut-texte: var(--charte-CafeLatte);
  --couleur-bandeau-haut-courant: var(--charte-Edimbourg);
  --couleur-sous-bandeau-texte: var(--charte-RedFox);
  --couleur-sous-bandeau-courant: var(--couleur-bandeau-haut-courant);
  --couleur-titres: var(--charte-Edimbourg);
  --couleur-sous-titres: var(--charte-Shortbread);
  --couleur-encadres-fond: var(--charte-Edimbourg);
  --couleur-encadres-bords: var(--charte-Shortbread);
  --couleur-encadres-titre: var(--charte-RedFox);
  --couleur-encadres-text: var(--couleur-textes);
  --couleur-menu-boutons-fond: var(--couleur-encadres-bords);
  --couleur-menu-boutons-bords: var(--couleur-encadres-fond);
  --couleur-menu-boutons-texte: black;
  --couleur-titre-h1: var(--charte-Highlands);
  --couleur-titre-h2: var(--charte-RedFox);
  --couleur-options-affichage: var(--couleur-textes);
  --couleur-fond-options-affichage: var(--charte-Edimbourg);
  --couleur-cadres-options-affichage: var(--couleur-encadres-bords);
  --couleur-liens: var(--charte-RedFox, red);
  --couleur-liens-vers-portefolio: var(--charte-Shortbread);
  --couleur-pied-de-page: var(--charte-Coton);
  --couleur-fond-pied-de-page: #181010;
}

* {
  box-sizing: border-box;
}

html {
  color: var(--couleur-textes,red);
  background-color: var(--couleur-fond, red);
  padding: 0px;
  margin: 0px auto;
  max-width: 80rem;
  font-size: 100%;
  filter: grayscale(var(--niveau-gris)) contrast(var(--niveau-contraste));
}

body {
  padding: 0px;
  margin: 0px;
  font-family: var(--police-textes, "monospace");
}

gras {
  display: inline;
  font-family: var(--police-textes-gras, "monospace");
}

a {
  text-decoration: none;
  color: var(--couleur-liens, ref);
}

p {
  margin: 0px;
  padding: 0px;
}

h1 {
  font-size: 4rem;
  color: var(--couleur-titre-h1, red);
  font-family: var(--police-titre-h1,"monospace");
  padding: 0px;
  margin: 0px;
  margin-top: 0.75em;
  margin-bottom: 1ex;
}

h2 {
  font-size: 2rem;
  color: var(--couleur-titre-h2, red);
  font-family: var(--police-titre-h2,"monospace");
}

/*
  Bandeau principal en haut --------------------------------------------------
*/

div.bandeaux {
  width: 100%;
  position: sticky;
  top: 0px;
  left: 0px;
  right: 0px;
  margin: 0px;
  padding: 0px;
}

div.bandeau_haut {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  font-size: 1.5rem;
  position: sticky;
  top: 0px;
  left: 0px;
  right: 0px;
  margin: 0px;
  padding: 0px;
  padding-bottom: 0.75rem;
  background-color: var(--couleur-fond, red);
  font-family: var(--police-bandeau,"monospace");
  color: var(--couleur-bandeau-haut-texte, red);
}

div.bandeau_haut_item {
  text-align: center;
  padding-top: 1ex;
  padding-bottom: 0.4ex;
  border-bottom-style: solid;
  border-bottom-width: 0.33ex;
  border-bottom-color: var(--couleur-fond, red);
  margin-right: 0.5rem;
  margin-left: 0.5rem;
}

div.bandeau_haut_item a {
  color: inherit;
  background-color: inherit;
}

div.bandeau_haut_item_courant {
  text-align: center;
  padding-top: 1ex;
  padding-bottom: 0.4ex;
  border-bottom-style: solid;
  border-bottom-width: 0.33ex;
  border-bottom-color: var(--couleur-bandeau-haut-courant,red);
  margin-right: 0.5rem;
  margin-left: 0.5rem;
}

div.bandeau_haut_item_courant a {
  color: inherit;
  background-color: inherit;
}

div.bandeau_haut_titre {
  text-align: center;
  font-size: 1.75rem;
  line-height: 90%;
}

/*
  Bandeau secondaire en haut -------------------------------------------------
*/

div.sous_bandeau {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  font-size: 1.5rem;
  top: 0px;
  left: 0px;
  right: 0px;
  margin: 0px;
  padding: 0px;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-bottom: 0.5rem;
  margin-bottom: 1.5rem;
  background-color: var(--couleur-fond, red);
  font-family: var(--police-sous-bandeau,"monospace");
  color: var(--couleur-sous-bandeau-texte, red);
}

div.sous_bandeau_item {
  text-align: center;
  padding-top: 1ex;
  padding-bottom: 0.4ex;
  border-bottom-style: solid;
  border-bottom-width: 0.33ex;
  border-bottom-color: var(--couleur-fond, red);
  margin-right: 0.5rem;
  margin-left: 0.5rem;
}

div.sous_bandeau_item a {
  color: inherit;
  background-color: inherit;
}

div.sous_bandeau_item_courant {
  text-align: center;
  padding-top: 1ex;
  padding-bottom: 0.4ex;
  border-bottom-style: solid;
  border-bottom-width: 0.33ex;
  border-bottom-color: var(--couleur-sous-bandeau-courant,red);
  margin-right: 0.5rem;
  margin-left: 0.5rem;
}

div.sous_bandeau_item_courant a {
  color: inherit;
  background-color: inherit;
}

/*
  Accès aux options d'affichage ----------------------------------------------
*/

div.options_affichage_acces {
  position: fixed;
  display: inline-block;
  left: 1rem;
  top: 1rem;
  font-size: 1.75rem;
  padding: 0rem;
  color: var(--couleur-options-affichage,red);
  background-color: transparent;
  text-align: center;
  z-index: 1;
}

div.options_affichage_acces button {
  display: inline-flex;
  align-items: center;
  justify-content: space-around;
  border: none;
  padding: 0.25rem;
  margin: 0px;
  border-radius: 1ex;
  cursor: pointer;
  color: var(--couleur-options-affichage,red);
  background-color: transparent;
  font-size: inherit;
}

div.options_affichage_acces button:hover {
  box-shadow: 0px 0px 0.25ex 0.25ex var(--couleur-cadres-options-affichage,red);
}

/*
  Panneau des options d'affichage --------------------------------------------
*/

div.options_affichage {
  display: none;
  position: fixed;
  left: 1rem;
  top: 4.5rem;
  font-size: 1.25rem;
  padding: 0.25rem;
  border: 0.2rem solid var(--couleur-cadres-options-affichage,red);
  border-radius: 2ex;
  color: var(--couleur-options-affichage,red);
  background-color: var(--couleur-fond-options-affichage,green);
  text-align: center;
  z-index: 2;
}

div.multi_choix {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
  background-color: transparent;
  padding: 0px;
  margin: 0px;
}

div.multi_choix div.choix_item {
  flex-grow: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0.125rem solid var(--couleur-cadres-options-affichage,red);
  border-radius: 0px;
  background-color: var(--couleur-fond,red);
  text-align: center;
  padding: 0.25rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  margin: 0px;
  margin-left: -0.125rem;
  cursor: pointer;
}

div.multi_choix div.choix_item:hover {
  box-shadow: 0px 0px 0.25ex 0.25ex var(--couleur-cadres-options-affichage,red);
  z-index: 1;
}

div.multi_choix div.choix_item:first-child {
  border-radius: 1.5rem 0rem 0rem 1.5rem;
  margin-left: 0rem;
}

div.multi_choix div.choix_item:last-child {
  border-radius: 0rem 1.5rem 1.5rem 0rem;
}

div.options_affichage table {
  border: none;
  margin: 1ex;
}

div.options_affichage table tr {
  border: none;
  margin: 1ex;
}

div.options_affichage table tr td {
  border: none;
  text-align: left;
  padding: 1ex;
}

/*
  Divers ---------------------------------------------------------------------
*/

img.inline_img {
  height: 1em;
}

img.rounded {
  border-radius: 1em;
}

img.zoomable {
  border-radius: 1em;
  transition: transform .2s;
  cursor: zoom-in;
}

img.zoomable:hover {
  box-shadow: 0px 0px 0.5em 0.5em lightgray;
}

img.zoomable.zoomed {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(2);
  cursor: zoom-out;
  border-radius: 1em;
  border: solid 1px black;
  box-shadow: 0px 0px 0.5em 0.5em lightgray;
}

#portfolio p {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  font-family: var(--police-textes, monospace);
}

#mentions_legales p {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  font-family: var(--police-textes, monospace);
}

#credits p,ul,li {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  font-family: var(--police-textes, monospace);
}

#contact p {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  font-family: var(--police-textes, monospace);
}

div.pied_de_page {
  width: 100%;
  display: grid;
  grid-template-columns: auto auto auto auto;
  justify-items: center;
  /*
  display: flex;
  justify-content: space-evenly;
  */
  align-items: center;
  margin: 0px;
  margin-top: 2rem;
  padding: 0.5rem;
  color: var(--couleur-pied-de-page, red);
  width: 100%;
  background-color: var(--couleur-fond-pied-de-page, red);
  a {
    text-decoration: none;
    color: inherit;
    background-color: inherit;
  }
}