/* theme colors*/
:root {
  --color-bg1: white;
  --color-text: #001D1F;
  --color-bg2: #FAF0E6;
  --color2: #00838F;
  --color-accent: #63FFDA;
  --color-accent2: #E91D63;
  --color-secret: #fffff8;
  --width1: 25em;
  --width-1: -25em;
  --width2: 45em;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg1: #001D1F;
    --color-text: #FAF0E6;
    --color-bg2: black;
    --color2: #00ACC1;
    --color-accent: #00808B;
    --color-accent2: #E91D63;
    --color-secret: #fffff8;
  }
}
body {
  font-family: Montserrat, Trebuchet MS, sans-serif;
  color: var(--color-text);
  background: var(--color-bg1);
}

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

a h3 {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 500;
  font-size: 1.3em;
}

a p {
  margin: 0.2em;
  margin-left: 0;
}

small {
  font-weight: 300;
}

a {
  color: var(--color2);
  text-decoration: none;
}

a:hover {
  background: var(--color-bg2);
  color: var(--color-text);
}

#markdown-toc li a {
  border: 3px solid var(--color-bg2);
}

header div a, footer div a {
  background: var(--color-bg2);
  border: var(--color-accent2) dotted medium;
}

footer div a {
  position: fixed;
  bottom: 10px;
  right: 10px;
}

header div a:hover, footer div a:hover {
  background: var(--color-accent2);
  border: var(--color-bg2) dotted medium;
}

nav a {
  margin-right: 1em;
  border-bottom: 3px dotted white;
}

nav a:hover, #markdown-toc li a:hoverm {
  border-bottom: 3px dotted var(--color-accent2);
  background: var(--color-bg2);
}

section a:hover {
  border-top: 3px dotted var(--color-accent2);
}

* {
  box-sizing: border-box;
  line-height: 1.5;
}

header, footer {
  padding: 1em;
  padding-left: 2.5em;
  margin: -0.5em;
  margin-bottom: 0;
}

.Ergonomie-des-jeux {
  background: url(/assets/images/UXJV.svg) no-repeat top right, var(--color-accent);
}

.Creation-de-jeux {
  background: url(/assets/images/JV.svg) no-repeat center right, var(--color-accent);
}

.Ergonomie {
  background: url(/assets/images/UX.svg) no-repeat top right, var(--color-accent);
}

.Enjmin {
  background: url(/assets/images/JV.svg) no-repeat bottom right, var(--color-bg2);
}

.Archive {
  background: url(/assets/images/JV.svg) no-repeat bottom right, var(--color-bg2);
}

p, ul {
  margin-bottom: 2em;
}

nav {
  max-width: 100%;
  padding-left: 1em;
  display: flex;
  flex-direction: column;
  padding: 0;
}

nav a, .mobileOnly, div a {
  margin: 0.5em;
  padding: 0.5em 1em 0.5em 1em;
}

nav a img {
  float: left;
  max-width: 1.5em;
  margin-right: 0.3em;
}

#markdown-toc {
  padding-right: 1em;
  line-height: 1em;
  border: thin solid var(--color-accent);
  background-color: var(--color-bg2);
}

#markdown-toc li {
  padding-bottom: 0.6em;
  line-height: 1em;
}

#markdown-toc::before {
  Content: "Index";
  font-size: 1.5em;
  line-height: 2em;
}

main {
  padding: 1em;
}

hr {
  border-top: thin dotted var(--color-accent);
  border-bottom: thin dotted var(--color2);
}

section {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: flex-start;
  flex: 2 100%;
  row-gap: 2em;
  column-gap: 2em;
}

section a {
  flex: 1 50%;
  border-top: 3px dotted var(--color-accent);
  padding: 0.4em;
  margin: 0;
  margin-bottom: 0em;
  padding-left: 0em;
}

section div {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: flex-start;
  flex: 1 100%;
  row-gap: 0.5em;
  column-gap: 0.5em;
}

section div a {
  flex: 1 100%;
  border-top: 3px dotted var(--color-bg1);
}

section div .title {
  flex: 100%;
  border-top: 3px dotted var(--color-accent);
}

img {
  width: 97%;
}

table {
  width: 97%;
  background-color: var(--color-bg2);
}

tr, th, td {
  padding: 1em;
  background-color: var(--color-bg1);
}

th {
  background-color: var(--color-bg2);
  border: var(--color-bg1) 2px solid;
}

@media screen and (min-width: 45em) {
  hr, article {
    max-width: var(--width2);
  }
  #markdown-toc {
    max-width: var(--width1);
    float: right;
    margin: 1em;
    margin-right: -10em;
  }
  section div a {
    flex: 1 50%;
    border-top: 3px dotted var(--color-bg1);
  }
  nav {
    margin: auto;
    display: flex;
    flex-flow: row wrap;
  }
  nav a {
    margin: 0 1em 0 1em;
    padding: 0.5em 1em 0.5em 1em;
  }
  .mobileOnly {
    display: none;
    visibility: hidden;
  }
}
@media screen and (min-width: 70em) {
  #markdown-toc {
    margin-right: var(--width-1);
  }
  article section {
    width: 150%;
  }
  section a {
    flex: 1 45%;
    padding: 0.5em 1em 0.5em 1em;
  }
  section div a {
    flex: 1 30%;
    border-top: 3px dotted var(--color-bg1);
  }
}
@media screen and (min-width: 90em) {
  main {
    padding-left: 5em;
  }
  article section {
    width: 200%;
  }
}
input, textarea, keygen, select, button {
  font-size: 1.2em;
  line-height: 1.5em;
  padding: 0.2em;
  margin-right: 2em;
  font-family: Schoolbell, Moo Moo, Sacramento, Happy Monkey, Homemade Apple, gaegu, Zeyada, Gloria Hallelujah, Dawning of a New Day, Dr Sugiyama, Crafty Girls, Cedarville Cursive, Annie Use Your Telescope, Calligraffitti, Beth Ellen, Architects Daughter, Allan, Caveat, The Girl Next Door, La Belle Aurore, Indie Flower, Nothing You Could Do, Reenie Beanie;
}

textarea {
  width: 40em;
  height: 8em;
}

input[type=radio], input[type=checkbox] {
  margin-right: 1em;
}

fieldset {
  font-size: 1.2em;
  background-color: white;
  background-color: var(--color-bg1);
  border: none;
  margin-bottom: 2em;
  margin-left: 0;
}

.column {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  max-width: 100%;
  padding: 0.5em 1em 0.5em 1em;
}

.scale label, .column label, .matrix label {
  margin: 0.2em;
  line-height: 1em;
  display: inline;
  padding: 0.2em 0.6em 0.2em 0.6em;
  border: thin solid white;
  border: thin solid var(--color-bg1);
}

.scale label {
  margin: 0.2em;
  line-height: 1em;
  display: inline;
  padding: 0.4em 0.6em 0.4em 0.6em;
  border: thin solid white;
  border: thin solid var(--color-bg1);
}

.scale label:hover, .column label:hover, .matrix label:hover {
  color: black;
  color: var(--color-text-accent);
  border: thin solid aqua;
  border: thin solid var(--color-accent);
  background-color: #ccfff2;
  background-color: var(--color-accent2);
}

input[type=text], input[type=email] {
  padding: 0.5em 0.2em 0.5em 0.2em;
  height: 1.5em;
}

meter {
  display: block;
  width: 50%;
  height: 1em;
}

span {
  line-height: 1.5em;
  padding: 0.2em;
}

:checked + span {
  background-color: #ccfff2;
  background-color: var(--color-accent2);
  border-bottom: dotted medium teal;
  border-bottom: dotted medium var(--color-accent2);
}

.scale, .matrix {
  width: 98%;
  display: grid;
  grid-gap: 0.2em 0.2em;
  margin-bottom: 0em;
}

.scale {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 2fr;
}

.matrix {
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.scale label, .matrix label {
  text-align: center;
  border-color: linen;
  border-color: var(--color-bg2);
}

.matrix div {
  border: solid thin white;
  border: solid thin var(--color-bg1);
  text-align: center;
}

.first {
  padding: 0em;
}

.even {
  background-color: white;
  background-color: var(--color-bg1);
  padding: 0.2em;
}

.odd {
  background-color: linen;
  background-color: var(--color-bg2);
  padding: 0.2em;
}

.odd label {
  border-color: white;
  border-color: var(--color-bg1);
}

.statement {
  grid-column: 1;
  border: none;
}

@media screen and (min-width: 640px) {
  .scale input, .matrix input {
    display: block;
    box-sizing: border-box;
    margin: 0.5em auto 0.5em auto;
  }
  .hide, .mstatement, .matrix span {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
  }
  .specify {
    line-height: 1.2em;
    font-size: 1.2em;
    margin-top: -0.2em;
    margin-bottom: 2em;
    max-width: 32.5em;
  }
  .matrix input:checked, .matrix input:enabled, .matrix input:focus, .matrix input {
    margin: 0em auto 0em auto;
    height: 100%;
    line-height: 100%;
  }
}
@media screen and (max-width: 640px) {
  input[type=text], textarea, select, button {
    margin: auto;
    margin-bottom: 2em;
    display: block;
    width: 98%;
  }
  .scale, .matrix, .column {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    max-width: 98%;
  }
  .column label, .scale label, .matrix label {
    width: 88%;
    text-align: left;
    padding: 0.5em 1em 0.5em 1em;
    height: 1.5em;
  }
  .matrix .statement {
    margin-top: 1em;
  }
  .th, .matrix legend {
    display: none;
  }
  .specify {
    line-height: 1.2em;
    font-size: 1.2em;
    margin-top: -0.2em;
    margin-bottom: 2em;
    width: 100%;
  }
}

/*# sourceMappingURL=style3.css.map */