/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/**
 * Make all elements from the DOM inherit from the parent box-sizing
 * Since `*` has a specificity of 0, it does not override the `html` value
 * making all elements inheriting from the root box-sizing value
 * See: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
 */
*,
*::before,
*::after {
  box-sizing: inherit;
}

@font-face {
  font-family: "Sketchnote Dingbats";
  src: url("../../fonts/SketchnoteDingbats-Regular.woff2") format("woff2"), url("../../fonts/SketchnoteDingbats-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sketchnote Text";
  src: url("../../fonts/SketchnoteText-Italic.woff2") format("woff2"), url("../../fonts/SketchnoteText-Italic.woff") format("woff");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Sketchnote Square";
  src: url("../../fonts/SketchnoteSquare-Regular.woff2") format("woff2"), url("../../fonts/SketchnoteSquare-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sketchnote Text";
  src: url("../../fonts/SketchnoteText-Bold.woff2") format("woff2"), url("../../fonts/SketchnoteText-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sketchnote Text";
  src: url("../../fonts/SketchnoteText-Regular.woff2") format("woff2"), url("../../fonts/SketchnoteText-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
.game-confirm-button {
  opacity: 0.5;
  scale: 0.9 0.9;
  pointer-events: none;
  -webkit-transition: scale 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -moz-transition: scale 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -ms-transition: scale 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -o-transition: scale 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: scale 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.game-confirm-button.shown {
  opacity: 1;
  scale: 1 1;
  pointer-events: auto;
}

.main-button,
.game-confirm-button {
  color: #00156B;
  background-color: #FFEB5A;
  font-size: 25px;
  min-width: 245px;
  border-radius: 9999px;
  overflow: hidden;
  font-family: "Sketchnote Text", sans-serif;
  font-weight: bold;
  border: none;
  outline: none;
  cursor: pointer;
  background-color: transparent;
}
.main-button img, .main-button svg,
.game-confirm-button img,
.game-confirm-button svg {
  height: auto;
}
.main-button .button-inner,
.game-confirm-button .button-inner {
  will-change: transform;
  -webkit-transition: scale 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -moz-transition: scale 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -ms-transition: scale 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -o-transition: scale 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: scale 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.main-button.disabled, .main-button:disabled,
.game-confirm-button.disabled,
.game-confirm-button:disabled {
  pointer-events: none;
}
.main-button:active .button-inner,
.game-confirm-button:active .button-inner {
  scale: 0.95 0.95;
}
.main-button .button-inner,
.game-confirm-button .button-inner {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 13px 50px;
  border-radius: 9999px;
}
.main-button.theme-yellow,
.game-confirm-button.theme-yellow {
  color: #00156B;
}
.main-button.theme-yellow .button-inner,
.game-confirm-button.theme-yellow .button-inner {
  background-color: #FFEB5A;
}
.main-button.theme-red,
.game-confirm-button.theme-red {
  color: #00156B;
}
.main-button.theme-red .button-inner,
.game-confirm-button.theme-red .button-inner {
  background-color: #EFA3CC;
}

.circle-button {
  border-radius: 100%;
  width: 94px;
  height: 94px;
  padding: 0;
  border: none;
  outline: none;
  cursor: pointer;
  background-color: transparent;
}
.circle-button img, .circle-button svg {
  height: auto;
}
.circle-button .button-inner {
  will-change: transform;
  -webkit-transition: scale 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -moz-transition: scale 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -ms-transition: scale 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -o-transition: scale 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: scale 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.circle-button.disabled, .circle-button:disabled {
  pointer-events: none;
}
.circle-button:active .button-inner {
  scale: 0.95 0.95;
}
.circle-button .button-inner {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 12px;
  border-radius: 100%;
}
.circle-button.theme-darkgray {
  color: #e9e9e8;
}
.circle-button.theme-darkgray .button-inner {
  background-color: #262626;
}
.circle-button.theme-yellow {
  color: #00156B;
}
.circle-button.theme-yellow .button-inner {
  background-color: #FFEB5A;
}
.circle-button.theme-blue {
  color: #FFFFFF;
}
.circle-button.theme-blue .button-inner {
  background-color: #293AB7;
}
.circle-button.theme-red {
  color: #00156B;
}
.circle-button.theme-red .button-inner {
  background-color: #EFA3CC;
}
@keyframes up-down-animation {
  0% {
    -webkit-transform: translate(0, 0px);
    -ms-transform: translate(0, 0px);
    transform: translate(0, 0px);
  }
  50% {
    -webkit-transform: translate(0, 8px);
    -ms-transform: translate(0, 8px);
    transform: translate(0, 8px);
  }
  100% {
    -webkit-transform: translate(0, 0px);
    -ms-transform: translate(0, 0px);
    transform: translate(0, 0px);
  }
}
.circle-button.up-down-animation img, .circle-button.up-down-animation svg {
  will-change: transform;
}
.circle-button.up-down-animation.play-animation img, .circle-button.up-down-animation.play-animation svg {
  animation: up-down-animation 1.5s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.circle-button.pulse-animation {
  transition: none !important;
}
@keyframes pulse-ring-animation {
  0% {
    opacity: 0;
    border-color: #6176af;
  }
  50% {
    opacity: 1;
    border-color: #293AB7;
  }
  100% {
    opacity: 0;
    border-color: #6176af;
  }
}
@keyframes pulse-inner {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.875);
    -ms-transform: scale(0.875);
    transform: scale(0.875);
  }
  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes pulse-outer {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    background-color: #293AB7;
  }
  50% {
    -webkit-transform: scale(0.925);
    -ms-transform: scale(0.925);
    transform: scale(0.925);
    background-color: #6176af;
  }
  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    background-color: #293AB7;
  }
}
.circle-button.pulse-animation .pulse-ring-1,
.circle-button.pulse-animation .pulse-ring-2 {
  position: absolute;
  border-radius: 100%;
  border: 3px solid #293AB7;
}
.circle-button.pulse-animation .pulse-ring-1 {
  width: 114%;
  height: 114%;
  opacity: 0.65;
}
.circle-button.pulse-animation .pulse-ring-2 {
  width: 128%;
  height: 128%;
  opacity: 0.45;
}
.circle-button.pulse-animation.play-animation {
  animation: pulse-outer 2s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
  animation-delay: 1s;
}
.circle-button.pulse-animation.play-animation .pulse-ring-1 {
  animation: pulse-ring-animation 2s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.circle-button.pulse-animation.play-animation .pulse-ring-2 {
  animation: pulse-ring-animation 2s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
  animation-delay: 0.15s;
}
.circle-button.pulse-animation.play-animation img {
  animation: pulse-inner 2s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
  animation-delay: 1s;
}

.image-button {
  border: none;
  outline: none;
  cursor: pointer;
  background-color: transparent;
  padding: 0;
  line-height: 0;
}
.image-button img, .image-button svg {
  height: auto;
}
.image-button .button-inner {
  will-change: transform;
  -webkit-transition: scale 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -moz-transition: scale 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -ms-transition: scale 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -o-transition: scale 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: scale 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.image-button.disabled, .image-button:disabled {
  pointer-events: none;
}
.image-button:active .button-inner {
  scale: 0.95 0.95;
}

#idle-help-button {
  width: 135px;
  height: 135px;
}

#idle-close-button {
  width: 105px;
  height: 105px;
}

#map-button {
  width: 159px;
  height: 159px;
  border: none;
  outline: none;
  cursor: pointer;
  background-color: transparent;
  border-radius: 25px;
}
#map-button img, #map-button svg {
  height: auto;
}
#map-button .button-inner {
  will-change: transform;
  -webkit-transition: scale 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -moz-transition: scale 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -ms-transition: scale 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -o-transition: scale 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: scale 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#map-button.disabled, #map-button:disabled {
  pointer-events: none;
}
#map-button:active .button-inner {
  scale: 0.95 0.95;
}
#map-button .button-inner {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: #77764D;
  border-radius: 25px;
}

#helper-button {
  -webkit-transition: opacity 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -moz-transition: opacity 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -ms-transition: opacity 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -o-transition: opacity 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: opacity 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#helper-close-button {
  width: 30px;
  height: 30px;
  font-size: 18px;
  font-weight: bold;
  color: #FFFFFF;
  background-color: #262626;
  border-radius: 100%;
  border: none;
  outline: none;
  cursor: pointer;
  background-color: transparent;
}
#helper-close-button img, #helper-close-button svg {
  height: auto;
}
#helper-close-button .button-inner {
  will-change: transform;
  -webkit-transition: scale 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -moz-transition: scale 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -ms-transition: scale 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -o-transition: scale 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: scale 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#helper-close-button.disabled, #helper-close-button:disabled {
  pointer-events: none;
}
#helper-close-button:active .button-inner {
  scale: 0.95 0.95;
}

#helper-yes-button,
#helper-no-button {
  width: 100%;
  color: #00156B;
  font-size: 32px;
  font-family: "Sketchnote Text", sans-serif;
  font-weight: bold;
  border-radius: 15px;
  border: none;
  outline: none;
  cursor: pointer;
  background-color: transparent;
}
#helper-yes-button img, #helper-yes-button svg,
#helper-no-button img,
#helper-no-button svg {
  height: auto;
}
#helper-yes-button .button-inner,
#helper-no-button .button-inner {
  will-change: transform;
  -webkit-transition: scale 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -moz-transition: scale 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -ms-transition: scale 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -o-transition: scale 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: scale 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#helper-yes-button.disabled, #helper-yes-button:disabled,
#helper-no-button.disabled,
#helper-no-button:disabled {
  pointer-events: none;
}
#helper-yes-button:active .button-inner,
#helper-no-button:active .button-inner {
  scale: 0.95 0.95;
}
#helper-yes-button .button-inner,
#helper-no-button .button-inner {
  padding: 31px;
  border-radius: 15px;
}

#helper-yes-button .button-inner {
  background-color: #FFEB5A;
}

#helper-no-button .button-inner {
  background-color: #EFA3CC;
}

body.i18n-fr .i18n .fr {
  opacity: 1;
}
body.i18n-fr .i18n .en {
  opacity: 0;
  display: none !important;
}

body.i18n-en .i18n .fr {
  opacity: 0;
  display: none !important;
}
body.i18n-en .i18n .en {
  opacity: 1;
}

.flipping-i18n {
  -webkit-transition: transform ease-in-out 0.25s, opacity 0.25s ease-in-out;
  -moz-transition: transform ease-in-out 0.25s, opacity 0.25s ease-in-out;
  -ms-transition: transform ease-in-out 0.25s, opacity 0.25s ease-in-out;
  -o-transition: transform ease-in-out 0.25s, opacity 0.25s ease-in-out;
  transition: transform ease-in-out 0.25s, opacity 0.25s ease-in-out;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -webkit-user-drag: none;
  outline: 0;
}
.flipping-i18n.flip-out {
  backface-visibility: hidden;
  z-index: 2;
  /* for firefox 31 */
  transform: rotateX(90deg);
}

.fading-i18n {
  -webkit-transition: opacity 0.25s ease-in-out;
  -moz-transition: opacity 0.25s ease-in-out;
  -ms-transition: opacity 0.25s ease-in-out;
  -o-transition: opacity 0.25s ease-in-out;
  transition: opacity 0.25s ease-in-out;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -webkit-user-drag: none;
  outline: 0;
  opacity: 1;
}
.fading-i18n.fade-out {
  opacity: 0 !important;
}

* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  font-feature-settings: "tnum";
  box-sizing: border-box;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -webkit-user-drag: none;
  outline: 0;
}

body {
  position: relative;
}

html, body {
  background-color: #f1f1e2;
  width: 1920px;
  height: 1080px;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  -webkit-text-size-adjust: none;
  -webkit-overflow-scrolling: touch;
  font-family: "Sketchnote Text", sans-serif;
  color: #00156B;
}

#main {
  display: none;
  width: 1920px;
  height: 1080px;
}

a {
  color: #00156B;
  text-decoration: none;
}
a:hover, a:active, a:focus {
  color: #00156B;
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  line-height: normal;
}

h1 {
  font-family: "Sketchnote Square", sans-serif;
  letter-spacing: 0.04em;
  font-weight: bold;
  font-size: 60px;
}

h2 {
  font-family: "Sketchnote Square", sans-serif;
  letter-spacing: 0.04em;
  font-weight: bold;
  font-size: 54px;
  text-transform: uppercase;
}

h3 {
  font-size: 35px;
}

h4 {
  font-size: 30px;
}

h5 {
  font-size: 28px;
}

h6 {
  font-size: 26px;
}

p {
  font-size: 38px;
  line-height: 1.24;
}
p.small {
  font-size: 31px;
}

strong, b {
  font-weight: bold;
}

img, video {
  max-width: 100%;
  height: auto;
}

.screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
  opacity: 0;
  overflow: hidden;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.screen.hidden {
  visibility: hidden;
  pointer-events: none;
}
.screen.disabled {
  pointer-events: none !important;
}
.screen:not(.current) {
  pointer-events: none !important;
}
.screen:not(.current) * {
  pointer-events: none !important;
}

#background-overlay,
.background-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

#background-overlay {
  background-color: rgba(198, 217, 244, 0.8);
}

.container {
  position: relative;
  width: 838px;
}
.container.smallest {
  width: 650px;
}
.container.small {
  width: 757px;
}
.container.large {
  width: 989px;
}
.container.padded-container {
  background-color: #FFFFFF;
  padding: 92px 96px;
  border-radius: 25px;
  text-align: center;
}
.container.padded-container.animated-border {
  background-image: url("../../images/shapes/animated-borders/default/animated-border.webp");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-color: transparent;
}
.container.padded-container.animated-border-small {
  background-image: url("../../images/shapes/animated-borders/small/animated-border.webp");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-color: transparent;
}
.container.padded-container .container-button {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: max-content;
  max-width: 100%;
  -webkit-transform: translate(-50%, 50%);
  -ms-transform: translate(-50%, 50%);
  transform: translate(-50%, 50%);
  will-change: transform;
}
.container.padded-container .container-title, .container.educative-container .container-content .container-title {
  position: absolute;
  top: 0;
  left: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-weight: bold;
  text-transform: uppercase;
  white-space: nowrap;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.container.padded-container .container-title .container-title-inner, .container.educative-container .container-content .container-title .container-title-inner {
  position: relative;
  padding: 19px 97px 19px 90px;
  z-index: 1;
}
.container.padded-container .container-title:after, .container.educative-container .container-content .container-title:after {
  content: "";
  position: absolute;
  left: 0;
  width: var(--title-width);
  height: 62px;
  background-color: #FFEB5A;
  border-radius: 31px;
  pointer-events: none;
}
.container.padded-container .container-title img, .container.padded-container .container-title svg, .container.educative-container .container-content .container-title img, .container.educative-container .container-content .container-title svg {
  position: absolute;
  top: 50%;
  right: 7px;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
.container.padded-container .container-title.character-tag, .container.educative-container .container-content .container-title.character-tag {
  color: #FFFFFF;
  text-transform: none;
}
.container.padded-container .container-title.character-tag .container-title-inner, .container.educative-container .container-content .container-title.character-tag .container-title-inner {
  padding: 19px 40px 19px 80px;
  z-index: 1;
}
.container.padded-container .container-title.character-tag img, .container.padded-container .container-title.character-tag svg, .container.educative-container .container-content .container-title.character-tag img, .container.educative-container .container-content .container-title.character-tag svg {
  position: absolute;
  top: 50%;
  left: 7px;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
.container.padded-container .container-title.character-tag:after, .container.educative-container .container-content .container-title.character-tag:after {
  background-color: #293AB7;
}
.container.content-container, .container.padded-container {
  margin-left: auto;
  margin-right: 140px;
}
.container.centered-container {
  margin: auto auto;
}
.container .row {
  display: flex;
}
.container .row .columns.two,
.container .row .column.two {
  width: 50%;
}
.container .row .columns.three,
.container .row .column.three {
  width: 33.3333333333%;
}
.container .row .columns.four,
.container .row .column.four {
  width: 25%;
}

span.inu {
  color: #8F8B3B !important;
}

span.no-wrap {
  white-space: nowrap;
}

.double-language .language-separator {
  width: 100%;
  height: 105px;
  background: transparent url(../../images/shapes/language-separator.png) center center no-repeat;
}
.double-language .en {
  color: #354AA4;
}

#game-trigger {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#triggers {
  display: flex;
  flex-wrap: wrap;
  max-width: 1590px;
  width: 100%;
  margin: 50px;
}
#triggers .trigger {
  display: flex;
  flex-grow: 1;
  justify-content: center;
  align-items: center;
  margin: 10px;
  width: 220px;
  height: 150px;
  line-height: 200px;
  padding: 0 25px;
  box-sizing: border-box;
  font-size: 19px;
  cursor: pointer;
  text-align: center;
  letter-spacing: 1px;
  color: #888;
  border: solid #888 1px;
  text-decoration: none;
  -webkit-transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -moz-transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -ms-transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -o-transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
#triggers .trigger.debug-mode {
  display: none;
}
#triggers .trigger.debug-mode.shown {
  display: flex;
}
#triggers .trigger .text {
  -webkit-transition: transform 0.1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -moz-transition: transform 0.1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -ms-transition: transform 0.1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -o-transition: transform 0.1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: transform 0.1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}
#triggers .trigger .text span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
  width: 100%;
  word-wrap: break-word;
}
#triggers .trigger .text span.debug-mode {
  display: none;
}
#triggers .trigger .text span.debug-mode.shown {
  display: inline;
}
#triggers .trigger:hover {
  background-color: white;
}
#triggers .trigger:active {
  background-color: white;
  color: solid #888 1px;
}
#triggers .trigger:active .text {
  -webkit-transform: scale(0.9);
  -ms-transform: scale(0.9);
  transform: scale(0.9);
}

.simulator {
  display: none;
  position: absolute;
  font-family: sans-serif;
  top: 60px;
  left: 0;
  width: 240px;
  z-index: 100;
  transition: left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.simulator .wrapper {
  position: absolute;
  width: 100%;
  background: #f3f3f3;
  border: 1px solid #bebebe;
  border-radius: 0 4px 4px 4px;
  box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.2);
  transition: box-shadow 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 999;
  padding: 10px;
}
.simulator .simulator-toggle-collapse {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e5e5e5;
  top: 0;
  right: calc(-40px + 1px);
  width: 40px;
  height: 40px;
  border: 1px solid #bebebe;
  border-radius: 4px 0 0 4px;
  box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.2);
  cursor: pointer;
  z-index: 998;
}
.simulator .simulator-toggle-collapse .icon {
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  width: 80%;
}
.simulator.collapsed {
  left: -240px;
}
.simulator.collapsed .wrapper {
  box-shadow: 0 0 25px 0 transparent;
}
.simulator.collapsed .simulator-toggle-collapse .icon {
  transform: rotate(45deg);
}
.simulator .row {
  display: flex;
  flex-direction: row;
  justify-content: stretch;
  width: 100%;
}
.simulator .simulator-btn,
.simulator .simulator-dropdown {
  color: #000;
  margin-bottom: 10px;
  font-size: 14px;
  flex-grow: 1;
}
.simulator .simulator-btn.hidden,
.simulator .simulator-dropdown.hidden {
  display: none !important;
}
.simulator .simulator-btn.side-by-side .row :first-child,
.simulator .simulator-dropdown.side-by-side .row :first-child {
  margin-right: 5px;
}
.simulator .simulator-btn.side-by-side .row :last-child,
.simulator .simulator-dropdown.side-by-side .row :last-child {
  margin-left: 5px;
}
.simulator .simulator-btn.simulator-dropdown label,
.simulator .simulator-dropdown.simulator-dropdown label {
  font-weight: bold;
  display: block;
  margin-bottom: 3px;
}
.simulator .simulator-btn.simulator-btn button, .simulator .simulator-btn.simulator-dropdown select,
.simulator .simulator-dropdown.simulator-btn button,
.simulator .simulator-dropdown.simulator-dropdown select {
  width: 100%;
  background: #dedede;
  border: 1px solid #bebebe;
  border-radius: 4px;
  font-weight: bold;
}
.simulator .simulator-btn.simulator-btn button,
.simulator .simulator-dropdown.simulator-btn button {
  text-align: center;
  cursor: pointer;
  padding: 10px 5px;
}
.simulator .simulator-btn.simulator-btn button:hover,
.simulator .simulator-dropdown.simulator-btn button:hover {
  background: #bebebe;
}
.simulator .simulator-btn.simulator-btn button:active,
.simulator .simulator-dropdown.simulator-btn button:active {
  background: #dedede;
}
.simulator .simulator-btn.simulator-dropdown select,
.simulator .simulator-dropdown.simulator-dropdown select {
  padding: 5px 5px;
}
.simulator hr {
  margin: 20px auto;
}

#main.myst-quete .screen[data-type=idle].idle-helper-shown .background-overlay,
#main.myst-quete .screen[data-type=idle].idle-helper-shown #idle-help {
  pointer-events: auto;
}
#main.myst-quete .screen[data-type=idle] .background-overlay {
  z-index: 1;
  pointer-events: auto;
  background-color: rgba(0, 21, 107, 0.86);
}
#main.myst-quete .screen[data-type=idle] #idle-help-button {
  position: absolute;
  bottom: 35px;
  left: 53px;
}
#main.myst-quete .screen[data-type=idle] #idle-help {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: absolute;
  z-index: 1;
  padding: 100px 115px 110px 115px;
  width: 1768px;
  height: 936px;
  background-image: url("../../images/shapes/animated-borders/game/animated-border.webp");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  opacity: 0;
  pointer-events: none;
}
#main.myst-quete .screen[data-type=idle] #idle-help .en {
  color: #8c98bd;
}
#main.myst-quete .screen[data-type=idle] #idle-help .container-content {
  width: 100%;
}
#main.myst-quete .screen[data-type=idle] #idle-help .container-content h2 {
  line-height: 1.4;
}
#main.myst-quete .screen[data-type=idle] #idle-help .steps {
  display: flex;
  margin-top: 40px;
  margin-left: -70px;
  margin-right: -70px;
}
#main.myst-quete .screen[data-type=idle] #idle-help .steps .step {
  width: 25%;
  padding-left: 70px;
  padding-right: 70px;
}
#main.myst-quete .screen[data-type=idle] #idle-help .steps .step:last-child .step-image:after {
  display: none;
}
#main.myst-quete .screen[data-type=idle] #idle-help .steps .step .step-count {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 22px;
  font-weight: bold;
  width: 53px;
  height: 53px;
  background-color: #FFEB5A;
  border-radius: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50px;
}
#main.myst-quete .screen[data-type=idle] #idle-help .steps .step .step-image {
  position: relative;
  min-height: 212px;
  margin-bottom: 60px;
}
#main.myst-quete .screen[data-type=idle] #idle-help .steps .step .step-image:after {
  content: "";
  position: absolute;
  top: 50%;
  right: -86px;
  width: 33px;
  height: 18px;
  background-image: url("../../images/idle/arrow-right.svg");
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
#main.myst-quete .screen[data-type=idle] #idle-help .steps .step .step-image img {
  max-width: 270px;
  max-height: 210px;
  width: auto;
  height: auto;
}
#main.myst-quete .screen[data-type=idle] #idle-help .steps .step img:not(:first-child) {
  margin-top: 22px;
  margin-bottom: 19px;
}
#main.myst-quete .screen[data-type=idle] #idle-help .steps .step p {
  font-size: 18px;
  font-weight: bold;
}
#main.myst-quete .screen[data-type=idle] #idle-help #idle-close-button {
  position: absolute;
  bottom: -145px;
  left: 50%;
  margin-left: -52px;
}

/**
 * SCREEN (EDUCATIVE, Image)
 */
#main.myst-quete .screen[data-type=educative] .background-overlay {
  background-color: rgba(0, 21, 107, 0.8);
}
#main.myst-quete .screen[data-type=educative] .educative-container {
  width: 1768px;
  height: 936px;
  background-image: url("../../images/shapes/animated-borders/game/animated-border.webp");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  text-align: center;
}
#main.myst-quete .screen[data-type=educative] .educative-container .left-container {
  position: absolute;
  left: 70px;
  top: 70px;
  width: 1040px;
  height: 780px;
}
#main.myst-quete .screen[data-type=educative] .educative-container .right-container {
  position: absolute;
  top: 0;
  right: 0;
  width: 650px;
  height: 100%;
  box-sizing: border-box;
  padding: 70px 80px 70px 40px;
  margin: 0;
  background: none;
  display: flex;
  align-items: center;
}
#main.myst-quete .screen[data-type=educative] .educative-container .right-container .container-content p {
  text-align: center;
  font-size: 27px;
  line-height: 1.5;
}
#main.myst-quete .screen[data-type=educative] .educative-container .container-note {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 550px;
  min-height: 420px;
  position: absolute;
  top: 63%;
  right: 85px;
  rotate: 2.5deg;
  background: #C6D9F4;
  padding: 0 40px;
}
#main.myst-quete .screen[data-type=educative] .educative-container .container-note:after {
  content: "";
  position: absolute;
  bottom: -49px;
  left: 0;
  width: 100%;
  height: 50px;
  pointer-events: none;
  background: #C6D9F4;
}
#main.myst-quete .screen[data-type=educative] .educative-container .container-note p {
  font-size: 24px;
  line-height: 1.4em;
}
#main.myst-quete .screen[data-type=educative] .educative-container .container-note p .text-white {
  color: #354AA4;
}
#main.myst-quete .screen[data-type=educative] .educative-container .container-note .inu {
  color: #354AA4 !important;
  font-weight: bold;
}
#main.myst-quete .screen[data-type=educative] .educative-container .container-button {
  position: absolute;
  bottom: 0;
  right: 0;
  left: initial;
  -webkit-transform: translate(30%, 40%);
  -ms-transform: translate(30%, 40%);
  transform: translate(30%, 40%);
}
#main.myst-quete .screen[data-type=educative] .educative-container.has-note .right-container {
  height: 680px;
}

/**
 * SCREEN (EDUCATIVE, Image)
 */
#main.myst-quete .screen[data-type=educative][data-media-type=image] .media-container {
  width: 100%;
  height: 100%;
  padding: 70px;
}
#main.myst-quete .screen[data-type=educative][data-media-type=image] .media-container img, #main.myst-quete .screen[data-type=educative][data-media-type=image] .media-container figure {
  display: block;
  width: 100%;
  height: 100%;
}

/**
 * SCREEN (EDUCATIVE, Mixed left right)
 */
#main.myst-quete .screen[data-type=educative][data-media-type=mixed-left-right] .container-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
}
#main.myst-quete .screen[data-type=educative][data-media-type=mixed-left-right] .media-container {
  width: 100%;
  height: 100%;
}
#main.myst-quete .screen[data-type=educative][data-media-type=mixed-left-right] .media-container img, #main.myst-quete .screen[data-type=educative][data-media-type=mixed-left-right] .media-container figure {
  display: block;
  width: 100%;
  height: 100%;
}
#main.myst-quete .screen[data-type=educative][data-media-type=mixed-left-right] .container-title {
  position: relative;
  top: unset;
  left: unset;
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
  color: #FFFFFF;
  --title-width: 100%;
}
#main.myst-quete .screen[data-type=educative][data-media-type=mixed-left-right] .container-title .container-title-inner {
  padding: 15px 60px 15px 60px;
}
#main.myst-quete .screen[data-type=educative][data-media-type=mixed-left-right] .container-title:after {
  background-color: #008550;
}

/**
 * SCREEN (EDUCATIVE, Mixed three image)
 */
#main.myst-quete .screen[data-type=educative][data-media-type=mixed-three-image] .media-container {
  width: 100%;
  height: 100%;
}
#main.myst-quete .screen[data-type=educative][data-media-type=mixed-three-image] .media-container figure {
  width: 40%;
  position: absolute;
}
#main.myst-quete .screen[data-type=educative][data-media-type=mixed-three-image] .media-container figure:nth-child(1) {
  top: 5%;
  left: 0%;
  rotate: -2deg;
}
#main.myst-quete .screen[data-type=educative][data-media-type=mixed-three-image] .media-container figure:nth-child(2) {
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  rotate: 0deg;
}
#main.myst-quete .screen[data-type=educative][data-media-type=mixed-three-image] .media-container figure:nth-child(3) {
  top: 3%;
  right: 4%;
  rotate: 2deg;
}
#main.myst-quete .screen[data-type=educative][data-media-type=mixed-three-image] .media-container figure img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}
#main.myst-quete .screen[data-type=educative][data-media-type=mixed-three-image] .media-container figure figcaption {
  font-size: 22px;
}

/**
 * SCREEN (EDUCATIVE, Mixed two image)
 */
#main.myst-quete .screen[data-type=educative][data-media-type=mixed-two-image] .media-container {
  width: 100%;
  height: 100%;
}
#main.myst-quete .screen[data-type=educative][data-media-type=mixed-two-image] .media-container figure {
  width: 52%;
  position: absolute;
}
#main.myst-quete .screen[data-type=educative][data-media-type=mixed-two-image] .media-container figure:nth-child(1) {
  top: 15%;
  left: 0%;
  rotate: -2deg;
}
#main.myst-quete .screen[data-type=educative][data-media-type=mixed-two-image] .media-container figure:nth-child(2) {
  top: 35%;
  right: 4%;
  rotate: 2deg;
}
#main.myst-quete .screen[data-type=educative][data-media-type=mixed-two-image] .media-container figure img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}
#main.myst-quete .screen[data-type=educative][data-media-type=mixed-two-image] .media-container figure figcaption {
  font-size: 22px;
}

/**
 * SCREEN (EDUCATIVE, Text)
 */
#main.myst-quete .screen[data-type=educative][data-media-type=text] button.circle-button {
  position: absolute;
  bottom: 0;
  right: 70px;
  -webkit-transform: translate(0, 50%);
  -ms-transform: translate(0, 50%);
  transform: translate(0, 50%);
}

/**
 * SCREEN (EDUCATIVE, Video)
 */
#main.myst-quete .screen[data-type=educative][data-media-type=video] .media-container {
  width: 100%;
  height: 100%;
  position: relative;
}
#main.myst-quete .screen[data-type=educative][data-media-type=video] .media-container.letter-box {
  background: #A1B8D2;
}
#main.myst-quete .screen[data-type=educative][data-media-type=video] .media-container video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#main.myst-quete .screen[data-type=educative][data-media-type=video] .media-container .replay-overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 21, 107, 0.8);
  display: none;
}
#main.myst-quete .screen[data-type=educative][data-media-type=video] .media-container .replay-overlay .replay-button {
  position: absolute;
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
}
#main.myst-quete .screen[data-type=educative][data-media-type=video] .media-container .replay-overlay .replay-button .circle-button {
  width: 150px;
  height: 150px;
}
#main.myst-quete .screen[data-type=educative][data-media-type=video] .media-container .replay-overlay .replay-button .button-label {
  font-family: "Sketchnote Text", sans-serif;
  display: inline-block;
  margin-top: 10px;
  font-size: 24px;
  color: #FFEB5A;
}

/**
 * SCREEN (Feedback, success/failure)
 */
#main.myst-quete .screen[data-type=feedback][data-feedback-type=success] .container-title {
  color: #FFFFFF;
}
#main.myst-quete .screen[data-type=feedback][data-feedback-type=success] .container-title:after {
  background-color: #008550;
}
#main.myst-quete .screen[data-type=feedback][data-feedback-type=failure] .container-title {
  color: #FFFFFF;
}
#main.myst-quete .screen[data-type=feedback][data-feedback-type=failure] .container-title:after {
  background-color: #DB2655;
}
#main.myst-quete .screen[data-type=feedback][data-feedback-type=failure] .container-content .spoken-text-i18n.hidden {
  display: none;
}
#main.myst-quete .screen[data-type=feedback][data-feedback-type=failure] .progress-steps {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin-top: 90px;
  margin-left: auto;
  margin-right: 140px;
}
#main.myst-quete .screen[data-type=feedback][data-feedback-type=failure] .progress-steps.steps-count-2 {
  justify-content: center;
}
#main.myst-quete .screen[data-type=feedback][data-feedback-type=failure] .progress-steps.steps-count-2 img {
  height: 180px;
}
#main.myst-quete .screen[data-type=feedback][data-feedback-type=failure] .progress-steps .progress-step {
  padding: 0 30px;
}
#main.myst-quete .screen[data-type=feedback][data-feedback-type=failure] .progress-steps .progress-step img.progress-failure-icon {
  display: block;
}
#main.myst-quete .screen[data-type=feedback][data-feedback-type=failure] .progress-steps .progress-step img.progress-success-icon {
  display: none;
}
#main.myst-quete .screen[data-type=feedback][data-feedback-type=failure] .progress-steps .progress-step.completed img.progress-failure-icon {
  display: none;
}
#main.myst-quete .screen[data-type=feedback][data-feedback-type=failure] .progress-steps .progress-step.completed img.progress-success-icon {
  display: block;
}
#main.myst-quete .screen[data-type=feedback] .container-title {
  font-size: 27px;
}
#main.myst-quete .screen[data-type=feedback] .container-content .feedback-context-image {
  margin-top: 55px;
}
#main.myst-quete .screen[data-type=feedback] .container-button {
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translate(-50%, 50%);
  -ms-transform: translate(-50%, 50%);
  transform: translate(-50%, 50%);
}
#main.myst-quete .screen[data-type=feedback][data-name="i08 - plancton-screen-5"] .button.pulse-animation {
  margin-left: -47px;
}

/**
 * SCREEN (Instruction)
 */
#main.myst-quete .screen[data-type=instruction] .container.padded-container .container-title .container-title-inner {
  padding-left: 50px;
}
#main.myst-quete .screen[data-type=instruction] .container.padded-container .container-title .container-title-inner:not(:has(img)):not(:has(svg)) {
  padding-right: 50px;
}
#main.myst-quete .screen[data-type=instruction] .container.padded-container.has-images {
  max-width: 720px;
  margin-right: 250px;
}
#main.myst-quete .screen[data-type=instruction] .container.padded-container.has-images .container-context-images {
  pointer-events: none;
  position: absolute;
  right: -190px;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  width: 280px;
}
#main.myst-quete .screen[data-type=instruction] .container.padded-container.has-images .container-context-images img {
  width: 100%;
  height: auto;
}

/**
 * SCREEN (Introduction)
 */
#main.myst-quete .screen[data-type=intro] .container.padded-container.has-images {
  max-width: 650px;
  margin-right: 250px;
}
#main.myst-quete .screen[data-type=intro] .container.padded-container.has-images .container-context-images {
  pointer-events: none;
  position: absolute;
  right: -190px;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  width: 280px;
}
#main.myst-quete .screen[data-type=intro] .container.padded-container.has-images .container-context-images img {
  width: 100%;
  height: auto;
}
#main.myst-quete .screen[data-type=intro] .container.padded-container.has-images[data-images-count="2"] {
  max-width: 650px;
  margin-right: 350px;
}
#main.myst-quete .screen[data-type=intro] .container.padded-container.has-images[data-images-count="2"] .container-context-images {
  width: 375px;
  right: -290px;
}
#main.myst-quete .screen[data-type=intro] .container.padded-container.has-images[data-images-count="2"] .container-context-images .context-image {
  position: absolute;
  top: 50%;
}
#main.myst-quete .screen[data-type=intro] .container.padded-container.has-images[data-images-count="2"] .container-context-images .context-image:nth-child(1) {
  -webkit-transform: translate(0, -85%);
  -ms-transform: translate(0, -85%);
  transform: translate(0, -85%);
}
#main.myst-quete .screen[data-type=intro] .container.padded-container.has-images[data-images-count="2"] .container-context-images .context-image:nth-child(2) {
  -webkit-transform: translate(0, -15%);
  -ms-transform: translate(0, -15%);
  transform: translate(0, -15%);
}

/**
 * REWARD
 */
#main.myst-quete .screen[data-type=reward] .container {
  margin-right: 225px;
  padding: 120px 96px;
}
#main.myst-quete .screen[data-type=reward] .reward-image-clip-path {
  position: absolute;
  top: 0;
  right: 30px;
  width: 350px;
  height: calc(100% - 159px);
  clip-path: inset(0% 0% 0% 0%);
}
#main.myst-quete .screen[data-type=reward] .reward-image-clip-path .reward-image-position {
  position: absolute;
  left: 60px;
  top: 540px;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
#main.myst-quete .screen[data-type=reward] .reward-image-clip-path .reward-image img {
  max-width: 257px;
  max-height: 325px;
  width: auto;
  height: auto;
}

/**
 * ENDING
 */
#main.myst-quete .screen[data-type=ending] .background-overlay {
  background-color: #bdd1f3;
}
#main.myst-quete .screen[data-type=ending] .timer-progress {
  position: absolute;
  top: 45px;
  right: 45px;
}
#main.myst-quete .screen[data-type=ending] .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 95px 0;
}
#main.myst-quete .screen[data-type=ending] p {
  font-family: "Sketchnote Square", sans-serif;
  letter-spacing: 0.04em;
  font-weight: bold;
  color: #6176af;
  font-size: 36px;
  text-align: center;
}
#main.myst-quete .screen[data-type=ending] #see-backpack-button {
  border: none;
  outline: none;
  cursor: pointer;
  background-color: transparent;
  font-family: "Sketchnote Square", sans-serif;
  letter-spacing: 0.04em;
  font-weight: bold;
  font-size: 62px;
  line-height: 1.1;
  text-transform: uppercase;
  width: 100%;
  color: #f1f1e2;
  border-radius: 25px;
}
#main.myst-quete .screen[data-type=ending] #see-backpack-button img, #main.myst-quete .screen[data-type=ending] #see-backpack-button svg {
  height: auto;
}
#main.myst-quete .screen[data-type=ending] #see-backpack-button .button-inner {
  will-change: transform;
  -webkit-transition: scale 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -moz-transition: scale 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -ms-transition: scale 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -o-transition: scale 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: scale 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#main.myst-quete .screen[data-type=ending] #see-backpack-button.disabled, #main.myst-quete .screen[data-type=ending] #see-backpack-button:disabled {
  pointer-events: none;
}
#main.myst-quete .screen[data-type=ending] #see-backpack-button:active .button-inner {
  scale: 0.95 0.95;
}
#main.myst-quete .screen[data-type=ending] #see-backpack-button .button-inner {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0 50px;
  background-color: #77764D;
  border-radius: 25px;
}
#main.myst-quete .screen[data-type=ending] #see-backpack-button img, #main.myst-quete .screen[data-type=ending] #see-backpack-button svg {
  min-width: 176px;
  width: 176px;
}
#main.myst-quete .screen[data-type=ending] #see-backpack-button .group-left {
  position: relative;
  display: flex;
  line-height: 0;
  padding-right: 70px;
}
#main.myst-quete .screen[data-type=ending] #see-backpack-button .group-left:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 3px;
  height: 159px;
  background-image: url("../../images/shapes/vertical-line.svg");
  background-size: 100% 100%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
#main.myst-quete .screen[data-type=ending] #see-backpack-button .group-right {
  padding: 58px 75px;
}
#main.myst-quete .screen[data-type=ending] #explore-button {
  color: #00156B;
  font-size: 36px;
  border-radius: 45px;
  font-family: "Sketchnote Square", sans-serif;
  letter-spacing: 0.04em;
  font-weight: bold;
  border: none;
  outline: none;
  cursor: pointer;
  background-color: transparent;
}
#main.myst-quete .screen[data-type=ending] #explore-button img, #main.myst-quete .screen[data-type=ending] #explore-button svg {
  height: auto;
}
#main.myst-quete .screen[data-type=ending] #explore-button .button-inner {
  will-change: transform;
  -webkit-transition: scale 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -moz-transition: scale 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -ms-transition: scale 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -o-transition: scale 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: scale 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#main.myst-quete .screen[data-type=ending] #explore-button.disabled, #main.myst-quete .screen[data-type=ending] #explore-button:disabled {
  pointer-events: none;
}
#main.myst-quete .screen[data-type=ending] #explore-button:active .button-inner {
  scale: 0.95 0.95;
}
#main.myst-quete .screen[data-type=ending] #explore-button .button-inner {
  padding: 30px 70px;
  background-color: #f1f1e2;
  border-radius: 45px;
}

#main.myst-quete .screen[data-type=game] .background-overlay {
  background-color: rgba(0, 21, 107, 0.8);
}
#main.myst-quete .screen[data-type=game][data-game-type=gameA] .replay-overlay, #main.myst-quete .screen[data-type=game][data-game-type=gameC] .replay-overlay, #main.myst-quete .screen[data-type=game][data-game-type=gameG] .replay-overlay, #main.myst-quete .screen[data-type=game][data-game-type=gameD] .replay-overlay, #main.myst-quete .screen[data-type=game][data-game-type=gameE] .replay-overlay, #main.myst-quete .screen[data-type=game][data-game-type=gameH] .replay-overlay {
  position: absolute;
  top: 80px;
  left: 70px;
  background-color: rgba(0, 21, 107, 0.8);
  display: none;
}
#main.myst-quete .screen[data-type=game][data-game-type=gameA] .replay-overlay .replay-button, #main.myst-quete .screen[data-type=game][data-game-type=gameC] .replay-overlay .replay-button, #main.myst-quete .screen[data-type=game][data-game-type=gameG] .replay-overlay .replay-button, #main.myst-quete .screen[data-type=game][data-game-type=gameD] .replay-overlay .replay-button, #main.myst-quete .screen[data-type=game][data-game-type=gameE] .replay-overlay .replay-button, #main.myst-quete .screen[data-type=game][data-game-type=gameH] .replay-overlay .replay-button {
  position: absolute;
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
}
#main.myst-quete .screen[data-type=game][data-game-type=gameA] .replay-overlay .replay-button .circle-button, #main.myst-quete .screen[data-type=game][data-game-type=gameC] .replay-overlay .replay-button .circle-button, #main.myst-quete .screen[data-type=game][data-game-type=gameG] .replay-overlay .replay-button .circle-button, #main.myst-quete .screen[data-type=game][data-game-type=gameD] .replay-overlay .replay-button .circle-button, #main.myst-quete .screen[data-type=game][data-game-type=gameE] .replay-overlay .replay-button .circle-button, #main.myst-quete .screen[data-type=game][data-game-type=gameH] .replay-overlay .replay-button .circle-button {
  width: 150px;
  height: 150px;
}
#main.myst-quete .screen[data-type=game][data-game-type=gameA] .replay-overlay .replay-button .button-label, #main.myst-quete .screen[data-type=game][data-game-type=gameC] .replay-overlay .replay-button .button-label, #main.myst-quete .screen[data-type=game][data-game-type=gameG] .replay-overlay .replay-button .button-label, #main.myst-quete .screen[data-type=game][data-game-type=gameD] .replay-overlay .replay-button .button-label, #main.myst-quete .screen[data-type=game][data-game-type=gameE] .replay-overlay .replay-button .button-label, #main.myst-quete .screen[data-type=game][data-game-type=gameH] .replay-overlay .replay-button .button-label {
  font-family: "Sketchnote Text", sans-serif;
  display: inline-block;
  margin-top: 10px;
  font-size: 24px;
  color: #FFEB5A;
}
#main.myst-quete .screen[data-type=game][data-game-type=gameA] > .container, #main.myst-quete .screen[data-type=game][data-game-type=gameC] > .container, #main.myst-quete .screen[data-type=game][data-game-type=gameG] > .container, #main.myst-quete .screen[data-type=game][data-game-type=gameD] > .container, #main.myst-quete .screen[data-type=game][data-game-type=gameE] > .container, #main.myst-quete .screen[data-type=game][data-game-type=gameH] > .container {
  width: 1768px;
  height: 936px;
  background-image: url("../../images/shapes/animated-borders/game/animated-border.webp");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
#main.myst-quete .screen[data-type=game][data-game-type=gameA] .game-question, #main.myst-quete .screen[data-type=game][data-game-type=gameC] .game-question, #main.myst-quete .screen[data-type=game][data-game-type=gameG] .game-question, #main.myst-quete .screen[data-type=game][data-game-type=gameD] .game-question, #main.myst-quete .screen[data-type=game][data-game-type=gameE] .game-question, #main.myst-quete .screen[data-type=game][data-game-type=gameH] .game-question {
  position: absolute;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  width: 475px;
  background: none;
  text-align: center;
}
#main.myst-quete .screen[data-type=game][data-game-type=gameA] .game-question p, #main.myst-quete .screen[data-type=game][data-game-type=gameC] .game-question p, #main.myst-quete .screen[data-type=game][data-game-type=gameG] .game-question p, #main.myst-quete .screen[data-type=game][data-game-type=gameD] .game-question p, #main.myst-quete .screen[data-type=game][data-game-type=gameE] .game-question p, #main.myst-quete .screen[data-type=game][data-game-type=gameH] .game-question p {
  font-size: 31px;
  line-height: 1.24;
}
#main.myst-quete .screen[data-type=game][data-game-type=gameA] .game-confirm-button, #main.myst-quete .screen[data-type=game][data-game-type=gameC] .game-confirm-button, #main.myst-quete .screen[data-type=game][data-game-type=gameG] .game-confirm-button, #main.myst-quete .screen[data-type=game][data-game-type=gameD] .game-confirm-button, #main.myst-quete .screen[data-type=game][data-game-type=gameE] .game-confirm-button, #main.myst-quete .screen[data-type=game][data-game-type=gameH] .game-confirm-button {
  margin-top: 50px;
}
#main.myst-quete .screen[data-type=game][data-game-type=gameA] .game-conclusion, #main.myst-quete .screen[data-type=game][data-game-type=gameC] .game-conclusion, #main.myst-quete .screen[data-type=game][data-game-type=gameG] .game-conclusion, #main.myst-quete .screen[data-type=game][data-game-type=gameD] .game-conclusion, #main.myst-quete .screen[data-type=game][data-game-type=gameE] .game-conclusion, #main.myst-quete .screen[data-type=game][data-game-type=gameH] .game-conclusion {
  position: absolute;
  top: 0;
  right: 0;
  width: 610px;
  box-sizing: border-box;
  padding: 70px 80px 70px 40px;
  margin: 0;
  height: 100%;
  background: none;
}
#main.myst-quete .screen[data-type=game][data-game-type=gameA] .game-conclusion.disabled, #main.myst-quete .screen[data-type=game][data-game-type=gameC] .game-conclusion.disabled, #main.myst-quete .screen[data-type=game][data-game-type=gameG] .game-conclusion.disabled, #main.myst-quete .screen[data-type=game][data-game-type=gameD] .game-conclusion.disabled, #main.myst-quete .screen[data-type=game][data-game-type=gameE] .game-conclusion.disabled, #main.myst-quete .screen[data-type=game][data-game-type=gameH] .game-conclusion.disabled {
  pointer-events: none;
}
#main.myst-quete .screen[data-type=game][data-game-type=gameA] .game-conclusion .container-content, #main.myst-quete .screen[data-type=game][data-game-type=gameC] .game-conclusion .container-content, #main.myst-quete .screen[data-type=game][data-game-type=gameG] .game-conclusion .container-content, #main.myst-quete .screen[data-type=game][data-game-type=gameD] .game-conclusion .container-content, #main.myst-quete .screen[data-type=game][data-game-type=gameE] .game-conclusion .container-content, #main.myst-quete .screen[data-type=game][data-game-type=gameH] .game-conclusion .container-content {
  width: 100%;
  height: 520px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  top: 82px;
  left: 50%;
  gap: 40px;
}
#main.myst-quete .screen[data-type=game][data-game-type=gameA] .game-conclusion .container-content .container-title, #main.myst-quete .screen[data-type=game][data-game-type=gameC] .game-conclusion .container-content .container-title, #main.myst-quete .screen[data-type=game][data-game-type=gameG] .game-conclusion .container-content .container-title, #main.myst-quete .screen[data-type=game][data-game-type=gameD] .game-conclusion .container-content .container-title, #main.myst-quete .screen[data-type=game][data-game-type=gameE] .game-conclusion .container-content .container-title, #main.myst-quete .screen[data-type=game][data-game-type=gameH] .game-conclusion .container-content .container-title {
  position: relative;
  top: unset;
  left: unset;
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
  color: #FFFFFF;
}
#main.myst-quete .screen[data-type=game][data-game-type=gameA] .game-conclusion .container-content .container-title .container-title-inner, #main.myst-quete .screen[data-type=game][data-game-type=gameC] .game-conclusion .container-content .container-title .container-title-inner, #main.myst-quete .screen[data-type=game][data-game-type=gameG] .game-conclusion .container-content .container-title .container-title-inner, #main.myst-quete .screen[data-type=game][data-game-type=gameD] .game-conclusion .container-content .container-title .container-title-inner, #main.myst-quete .screen[data-type=game][data-game-type=gameE] .game-conclusion .container-content .container-title .container-title-inner, #main.myst-quete .screen[data-type=game][data-game-type=gameH] .game-conclusion .container-content .container-title .container-title-inner {
  padding: 15px 60px 15px 60px;
}
#main.myst-quete .screen[data-type=game][data-game-type=gameA] .game-conclusion .container-content .container-title:after, #main.myst-quete .screen[data-type=game][data-game-type=gameC] .game-conclusion .container-content .container-title:after, #main.myst-quete .screen[data-type=game][data-game-type=gameG] .game-conclusion .container-content .container-title:after, #main.myst-quete .screen[data-type=game][data-game-type=gameD] .game-conclusion .container-content .container-title:after, #main.myst-quete .screen[data-type=game][data-game-type=gameE] .game-conclusion .container-content .container-title:after, #main.myst-quete .screen[data-type=game][data-game-type=gameH] .game-conclusion .container-content .container-title:after {
  background-color: #008550;
}
#main.myst-quete .screen[data-type=game][data-game-type=gameA] .game-conclusion .container-content p, #main.myst-quete .screen[data-type=game][data-game-type=gameC] .game-conclusion .container-content p, #main.myst-quete .screen[data-type=game][data-game-type=gameG] .game-conclusion .container-content p, #main.myst-quete .screen[data-type=game][data-game-type=gameD] .game-conclusion .container-content p, #main.myst-quete .screen[data-type=game][data-game-type=gameE] .game-conclusion .container-content p, #main.myst-quete .screen[data-type=game][data-game-type=gameH] .game-conclusion .container-content p {
  font-size: 27px;
  line-height: 1.5;
}
#main.myst-quete .screen[data-type=game][data-game-type=gameA] .game-conclusion .container-content p i, #main.myst-quete .screen[data-type=game][data-game-type=gameC] .game-conclusion .container-content p i, #main.myst-quete .screen[data-type=game][data-game-type=gameG] .game-conclusion .container-content p i, #main.myst-quete .screen[data-type=game][data-game-type=gameD] .game-conclusion .container-content p i, #main.myst-quete .screen[data-type=game][data-game-type=gameE] .game-conclusion .container-content p i, #main.myst-quete .screen[data-type=game][data-game-type=gameH] .game-conclusion .container-content p i {
  font-style: italic;
}
#main.myst-quete .screen[data-type=game][data-game-type=gameA] .game-conclusion .container-note, #main.myst-quete .screen[data-type=game][data-game-type=gameC] .game-conclusion .container-note, #main.myst-quete .screen[data-type=game][data-game-type=gameG] .game-conclusion .container-note, #main.myst-quete .screen[data-type=game][data-game-type=gameD] .game-conclusion .container-note, #main.myst-quete .screen[data-type=game][data-game-type=gameE] .game-conclusion .container-note, #main.myst-quete .screen[data-type=game][data-game-type=gameH] .game-conclusion .container-note {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 90%;
  min-height: 420px;
  position: absolute;
  top: 63%;
  left: -25px;
  rotate: 2.5deg;
  background: #C6D9F4;
  padding: 0 40px;
}
#main.myst-quete .screen[data-type=game][data-game-type=gameA] .game-conclusion .container-note:after, #main.myst-quete .screen[data-type=game][data-game-type=gameC] .game-conclusion .container-note:after, #main.myst-quete .screen[data-type=game][data-game-type=gameG] .game-conclusion .container-note:after, #main.myst-quete .screen[data-type=game][data-game-type=gameD] .game-conclusion .container-note:after, #main.myst-quete .screen[data-type=game][data-game-type=gameE] .game-conclusion .container-note:after, #main.myst-quete .screen[data-type=game][data-game-type=gameH] .game-conclusion .container-note:after {
  content: "";
  position: absolute;
  bottom: -49px;
  left: 0;
  width: 100%;
  height: 50px;
  pointer-events: none;
  background: #C6D9F4;
}
#main.myst-quete .screen[data-type=game][data-game-type=gameA] .game-conclusion .container-note p, #main.myst-quete .screen[data-type=game][data-game-type=gameC] .game-conclusion .container-note p, #main.myst-quete .screen[data-type=game][data-game-type=gameG] .game-conclusion .container-note p, #main.myst-quete .screen[data-type=game][data-game-type=gameD] .game-conclusion .container-note p, #main.myst-quete .screen[data-type=game][data-game-type=gameE] .game-conclusion .container-note p, #main.myst-quete .screen[data-type=game][data-game-type=gameH] .game-conclusion .container-note p {
  font-size: 24px;
  line-height: 1.4;
}
#main.myst-quete .screen[data-type=game][data-game-type=gameA] .game-conclusion .container-note p .text-white, #main.myst-quete .screen[data-type=game][data-game-type=gameC] .game-conclusion .container-note p .text-white, #main.myst-quete .screen[data-type=game][data-game-type=gameG] .game-conclusion .container-note p .text-white, #main.myst-quete .screen[data-type=game][data-game-type=gameD] .game-conclusion .container-note p .text-white, #main.myst-quete .screen[data-type=game][data-game-type=gameE] .game-conclusion .container-note p .text-white, #main.myst-quete .screen[data-type=game][data-game-type=gameH] .game-conclusion .container-note p .text-white {
  color: #354AA4;
}
#main.myst-quete .screen[data-type=game][data-game-type=gameA] .game-conclusion .container-note p sup, #main.myst-quete .screen[data-type=game][data-game-type=gameC] .game-conclusion .container-note p sup, #main.myst-quete .screen[data-type=game][data-game-type=gameG] .game-conclusion .container-note p sup, #main.myst-quete .screen[data-type=game][data-game-type=gameD] .game-conclusion .container-note p sup, #main.myst-quete .screen[data-type=game][data-game-type=gameE] .game-conclusion .container-note p sup, #main.myst-quete .screen[data-type=game][data-game-type=gameH] .game-conclusion .container-note p sup {
  font-size: smaller;
  vertical-align: super;
  line-height: 0;
}
#main.myst-quete .screen[data-type=game][data-game-type=gameA] .game-conclusion .container-note .inu, #main.myst-quete .screen[data-type=game][data-game-type=gameC] .game-conclusion .container-note .inu, #main.myst-quete .screen[data-type=game][data-game-type=gameG] .game-conclusion .container-note .inu, #main.myst-quete .screen[data-type=game][data-game-type=gameD] .game-conclusion .container-note .inu, #main.myst-quete .screen[data-type=game][data-game-type=gameE] .game-conclusion .container-note .inu, #main.myst-quete .screen[data-type=game][data-game-type=gameH] .game-conclusion .container-note .inu {
  color: #354AA4 !important;
  font-weight: bold;
}
#main.myst-quete .screen[data-type=game][data-game-type=gameA] .game-conclusion .container-button, #main.myst-quete .screen[data-type=game][data-game-type=gameC] .game-conclusion .container-button, #main.myst-quete .screen[data-type=game][data-game-type=gameG] .game-conclusion .container-button, #main.myst-quete .screen[data-type=game][data-game-type=gameD] .game-conclusion .container-button, #main.myst-quete .screen[data-type=game][data-game-type=gameE] .game-conclusion .container-button, #main.myst-quete .screen[data-type=game][data-game-type=gameH] .game-conclusion .container-button {
  position: absolute;
  bottom: 0;
  right: 0;
  left: initial;
  -webkit-transform: translate(30%, 40%);
  -ms-transform: translate(30%, 40%);
  transform: translate(30%, 40%);
}
#main.myst-quete .screen[data-type=game][data-game-type=gameC] .game-conclusion .container-note {
  width: 77%;
  top: 66%;
  left: 63px;
}
#main.myst-quete .screen[data-type=game][data-game-type=gameE] .answers-container {
  pointer-events: none;
  position: absolute;
  top: 80px;
  left: 70px;
}
#main.myst-quete .screen[data-type=game][data-game-type=gameE] .answers-container .answer-tag {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #00156B;
  background-color: #FFEB5A;
  font-size: 20px;
  width: 445px;
  height: 85px;
  border-radius: 42.5px;
  padding: 0 20px;
  box-sizing: content-box;
  position: absolute;
}
#main.myst-quete .screen[data-type=game][data-game-type=gameTambour] .background-overlay {
  background-color: rgba(189, 209, 243, 0.8);
}
#main.myst-quete .screen[data-type=game][data-game-type=gameTambour] > .container {
  width: 1920px;
  height: 1080px;
}
#main.myst-quete .screen[data-type=game][data-game-type=gameTambour] .game-instructions {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 21, 107, 0.8);
}
#main.myst-quete .screen[data-type=game][data-game-type=gameTambour] .game-instructions-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1200px;
  height: 680px;
  background-image: url("../../images/shapes/animated-borders/game/animated-border.webp");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 110px 94px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#main.myst-quete .screen[data-type=game][data-game-type=gameTambour] .game-instructions-inner .instructions-tambour {
  width: 375px;
}
#main.myst-quete .screen[data-type=game][data-game-type=gameTambour] .game-instructions-inner .instructions-tambour .demo-tambour {
  position: relative;
  width: 400px;
  height: 400px;
  transform: rotate(-5deg);
}
#main.myst-quete .screen[data-type=game][data-game-type=gameTambour] .game-instructions-inner .instructions-tambour .demo-tambour img {
  position: absolute;
  top: 0;
  left: 0;
}
#main.myst-quete .screen[data-type=game][data-game-type=gameTambour] .game-instructions-inner .instructions-tambour .demo-tambour .tambour-hit-note {
  opacity: 0;
}
#main.myst-quete .screen[data-type=game][data-game-type=gameTambour] .game-instructions-inner .instructions-content {
  width: 560px;
}
#main.myst-quete .screen[data-type=game][data-game-type=gameTambour] .game-instructions-inner .instructions-content p {
  font-size: 34px;
  line-height: 1.5;
}
#main.myst-quete .screen[data-type=game][data-game-type=gameTambour] .game-instructions-inner .instructions-content p .orange {
  color: #E5AE25;
}
#main.myst-quete .screen[data-type=game][data-game-type=gameTambour] .game-instructions-inner .instructions-content p .green {
  color: #008550;
}
#main.myst-quete .screen[data-type=game][data-game-type=gameTambour] .game-instructions-inner .instructions-content p .blue {
  color: #0054BA;
}
#main.myst-quete .screen[data-type=game][data-game-type=gameTambour] .game-instructions-inner .container-button {
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translate(-50%, 50%);
  -ms-transform: translate(-50%, 50%);
  transform: translate(-50%, 50%);
  will-change: transform;
}
#main.myst-quete .screen[data-type=game][data-game-type=gameTambour] .game-instructions-inner .container-button button {
  border: none;
  outline: none;
  cursor: pointer;
  background-color: transparent;
  color: #00156B;
  font-size: 24px;
  font-family: "Sketchnote Text", sans-serif;
  font-weight: bold;
  border-radius: 15px;
  text-transform: uppercase;
}
#main.myst-quete .screen[data-type=game][data-game-type=gameTambour] .game-instructions-inner .container-button button img, #main.myst-quete .screen[data-type=game][data-game-type=gameTambour] .game-instructions-inner .container-button button svg {
  height: auto;
}
#main.myst-quete .screen[data-type=game][data-game-type=gameTambour] .game-instructions-inner .container-button button .button-inner {
  will-change: transform;
  -webkit-transition: scale 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -moz-transition: scale 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -ms-transition: scale 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -o-transition: scale 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: scale 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#main.myst-quete .screen[data-type=game][data-game-type=gameTambour] .game-instructions-inner .container-button button.disabled, #main.myst-quete .screen[data-type=game][data-game-type=gameTambour] .game-instructions-inner .container-button button:disabled {
  pointer-events: none;
}
#main.myst-quete .screen[data-type=game][data-game-type=gameTambour] .game-instructions-inner .container-button button:active .button-inner {
  scale: 0.95 0.95;
}
#main.myst-quete .screen[data-type=game][data-game-type=gameTambour] .game-instructions-inner .container-button .button-inner {
  padding: 20px 130px;
  border-radius: 40px;
  background-color: #FFEB5A;
}
#main.myst-quete .screen[data-type=game][data-game-type=gameTambour] .game-instructions-inner .try-me-label {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-weight: bold;
  text-transform: uppercase;
  white-space: nowrap;
  margin-bottom: 35px;
}
#main.myst-quete .screen[data-type=game][data-game-type=gameTambour] .game-instructions-inner .try-me-label .try-me-label-inner {
  position: relative;
  padding: 19px 97px 19px 90px;
  z-index: 1;
  color: #FFFFFF;
}
#main.myst-quete .screen[data-type=game][data-game-type=gameTambour] .game-instructions-inner .try-me-label:after {
  content: "";
  position: absolute;
  left: 50%;
  width: 285px;
  height: 48px;
  background-color: #00156B;
  border-radius: 24px;
  pointer-events: none;
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}

[data-pixi-devtools=overlay] {
  z-index: 999999;
}

.language-switcher {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  visibility: hidden;
}

.timer-progress {
  width: 63px;
  height: 60px;
  mask-image: url("../../images/icons/timer-mask.svg");
  background-color: #8794D8;
}
.timer-progress .timer-inner {
  -webkit-transform: rotate(-85deg);
  -moz-transform: rotate(-85deg);
  -ms-transform: rotate(-85deg);
  -o-transform: rotate(-85deg);
}
.timer-progress .timer-inner circle {
  fill: none;
  stroke: #293AB7;
  stroke-width: 40px;
}

#perso {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1920px;
  height: 1080px;
  pointer-events: none;
}
#perso video {
  position: absolute;
  top: 3px;
  left: 0;
}
#perso video.hidden {
  opacity: 0.001;
}

#background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#map-button-container {
  position: absolute;
  right: 50px;
  bottom: 50px;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
}
#map-button-container.shown {
  pointer-events: auto;
}

#screen-activity-check {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  background-color: rgba(0, 21, 107, 0.86);
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -moz-transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -ms-transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -o-transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
#screen-activity-check.shown {
  opacity: 1;
  pointer-events: auto;
}
#screen-activity-check .timer-progress {
  margin-bottom: 50px;
}
#screen-activity-check .inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 1048px;
  height: 650px;
  padding: 100px;
  background-image: url("../../images/shapes/animated-borders/idle/animated-border.webp");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
#screen-activity-check .inner .opacity-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#screen-activity-check #screen-activity-button {
  margin-top: 85px;
  color: #00156B;
  font-size: 24px;
  border-radius: 25px;
  font-family: "Sketchnote Text", sans-serif;
  border: none;
  outline: none;
  cursor: pointer;
  background-color: transparent;
}
#screen-activity-check #screen-activity-button img, #screen-activity-check #screen-activity-button svg {
  height: auto;
}
#screen-activity-check #screen-activity-button .button-inner {
  will-change: transform;
  -webkit-transition: scale 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -moz-transition: scale 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -ms-transition: scale 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -o-transition: scale 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: scale 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#screen-activity-check #screen-activity-button.disabled, #screen-activity-check #screen-activity-button:disabled {
  pointer-events: none;
}
#screen-activity-check #screen-activity-button:active .button-inner {
  scale: 0.95 0.95;
}
#screen-activity-check #screen-activity-button .button-inner {
  padding: 18px 140px;
  background-color: #FFEB5A;
  border-radius: 25px;
}

#mqtt-status {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: absolute;
  right: 40px;
  top: 40px;
  width: 300px;
  height: 100px;
  pointer-events: none;
  -webkit-transition: transform 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955), opacity 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -moz-transition: transform 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955), opacity 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -ms-transition: transform 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955), opacity 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -o-transition: transform 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955), opacity 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: transform 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955), opacity 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
#mqtt-status svg {
  height: 100px;
}
#mqtt-status.connected {
  transform: translate(40px, 0);
  opacity: 0;
}

#map {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 6;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#map.shown {
  pointer-events: auto;
}
#map .background-overlay {
  background-color: rgba(198, 217, 244, 0.8);
}
#map #map-inner {
  display: flex;
  position: absolute;
  left: 95px;
  top: 70px;
  right: 95px;
  bottom: 70px;
  background-color: #f1f1e2;
  -webkit-transform: translate(0, -115%);
  -ms-transform: translate(0, -115%);
  transform: translate(0, -115%);
}
#map #map-inner:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -11px;
  left: -11px;
  width: calc(100% + 22px);
  height: calc(100% + 22px);
  pointer-events: none;
  background-image: url("../../images/shapes/animated-borders/map/animated-border.webp");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
#map #map-inner > .group-left {
  width: 1185px;
  height: 100%;
}
#map #map-inner > .group-left img, #map #map-inner > .group-left svg {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}
#map #map-inner > .group-left .map-background, #map #map-inner > .group-left .map-background > div {
  width: 100%;
  height: 100%;
}
#map #map-inner > .group-left .map-background img {
  object-fit: cover;
  object-position: left center;
}
#map #map-inner > .group-left .pin {
  position: absolute;
  width: 80px;
  height: 80px;
  margin-left: -40px;
  margin-top: -40px;
}
#map #map-inner > .group-left .pin .reward-completed {
  display: none;
}
#map #map-inner > .group-left .pin.current {
  animation: pulse 2s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
@keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.825);
    -ms-transform: scale(0.825);
    transform: scale(0.825);
  }
  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
#map #map-inner > .group-left .pin.completed .reward-empty {
  display: none;
}
#map #map-inner > .group-left .pin.completed .reward-completed {
  display: inline-block;
}
#map #map-inner > .group-right {
  display: flex;
  flex-direction: column;
  width: 545px;
  height: 940px;
  background-color: #77764D;
  color: #f1f1e2;
}
#map #map-reward-header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 48px;
  font-family: "Sketchnote Square", sans-serif;
  letter-spacing: 0.04em;
  font-weight: bold;
  font-size: 36px;
  font-weight: bold;
  letter-spacing: 7px;
}
#map #map-reward-header span {
  display: flex;
  justify-content: center;
  align-items: center;
}
#map #map-reward-header span.en img {
  margin-left: 20px;
}
#map #map-reward-header span.fr img {
  margin: 0 30px 0 20px;
}
#map #map-rewards-area {
  position: relative;
  flex: 1;
  background-color: #605E3A;
  margin: 35px;
  background-image: url("../../images/map/reward-background.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
#map #map-rewards-area .map-reward {
  position: absolute;
  display: inline-block;
  opacity: 0;
  pointer-events: none;
  cursor: grab;
  line-height: 0;
}
#map #map-rewards-area .map-reward.completed {
  opacity: 1;
  pointer-events: auto;
}
#map #map-rewards-area .map-reward img {
  width: 100%;
  max-width: unset;
}
#map #map-rewards-area .map-reward[data-item-index="0"] {
  top: 6%;
  left: 6%;
}
#map #map-rewards-area .map-reward[data-item-index="4"] {
  top: 35%;
  left: 30%;
}
#map #map-rewards-area .map-reward[data-item-index="8"] {
  top: 20%;
  left: 20%;
}
#map #map-rewards-area .map-reward[data-item-index="12"] {
  top: 6%;
  left: 27.5%;
}
#map #map-rewards-area .map-reward[data-item-index="16"] {
  top: 27.5%;
  left: 6%;
}
#map #map-rewards-area .map-reward[data-item-index="1"] {
  bottom: 6%;
  left: 6%;
}
#map #map-rewards-area .map-reward[data-item-index="5"] {
  bottom: 20%;
  left: 20%;
}
#map #map-rewards-area .map-reward[data-item-index="9"] {
  bottom: 27.5%;
  left: 6%;
}
#map #map-rewards-area .map-reward[data-item-index="13"] {
  bottom: 6%;
  left: 27.5%;
}
#map #map-rewards-area .map-reward[data-item-index="17"] {
  bottom: 27.5%;
  left: 27.5%;
}
#map #map-rewards-area .map-reward[data-item-index="2"] {
  top: 6%;
  right: 6%;
}
#map #map-rewards-area .map-reward[data-item-index="6"] {
  top: 20%;
  right: 20%;
}
#map #map-rewards-area .map-reward[data-item-index="10"] {
  top: 27.5%;
  right: 6%;
}
#map #map-rewards-area .map-reward[data-item-index="14"] {
  top: 6%;
  right: 27.5%;
}
#map #map-rewards-area .map-reward[data-item-index="18"] {
  top: 35%;
  right: 20%;
}
#map #map-rewards-area .map-reward[data-item-index="3"] {
  bottom: 6%;
  right: 6%;
}
#map #map-rewards-area .map-reward[data-item-index="7"] {
  bottom: 20%;
  right: 20%;
}
#map #map-rewards-area .map-reward[data-item-index="11"] {
  bottom: 6%;
  right: 27.5%;
}
#map #map-rewards-area .map-reward[data-item-index="15"] {
  bottom: 27.5%;
  right: 6%;
}
#map #map-rewards-area .map-reward[data-item-index="19"] {
  bottom: 27.5%;
  right: 6%;
}
#map #map-reward-groups {
  margin: 0 35px 35px 35px;
}
#map #map-reward-groups .reward-group {
  display: flex;
  align-items: center;
  line-height: 1.25;
  font-size: 13px;
  font-family: "Sketchnote Square", sans-serif;
  letter-spacing: 0.04em;
  font-weight: bold;
}
#map #map-reward-groups .reward-group .reward-count {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 19px;
  height: 19px;
  border-radius: 3px;
  margin-right: 12px;
  box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.25);
}
#map #map-reward-groups .reward-group div.i18n {
  letter-spacing: 4px;
  text-transform: uppercase;
}
#map #map-reward-groups .reward-group:not(:last-child) {
  margin-bottom: 15px;
}
#map #map-reward-groups .reward-group[data-reward-type=green] .reward-count {
  background-color: #008550;
}
#map #map-reward-groups .reward-group[data-reward-type=purple] .reward-count {
  background-color: #8C61C5;
}
#map #map-reward-groups .reward-group[data-reward-type=red] .reward-count {
  background-color: #DB2655;
}
#map #map-reward-groups .reward-group[data-reward-type=blue] .reward-count {
  background-color: #05A8DB;
}
#map #close-map {
  position: absolute;
  left: -35px;
  bottom: -25px;
  z-index: 1;
}

#map-popup-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#map-popup-container.shown {
  pointer-events: auto;
}

#map-reward-overlay,
#map-tutorial-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#map-reward-overlay .map-cover,
#map-tutorial-overlay .map-cover {
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(96, 94, 58, 0.6);
  opacity: 0;
}
#map-reward-overlay .map-tutorial-step,
#map-reward-overlay .map-reward-step,
#map-tutorial-overlay .map-tutorial-step,
#map-tutorial-overlay .map-reward-step {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#map-reward-overlay .map-tutorial-step .container,
#map-reward-overlay .map-reward-step .container,
#map-tutorial-overlay .map-tutorial-step .container,
#map-tutorial-overlay .map-reward-step .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 105px 96px;
  margin-right: 0;
  transform: translate(-50%, -50%) !important;
  opacity: 0;
  pointer-events: none;
}
#map-reward-overlay .map-tutorial-step .container.shown,
#map-reward-overlay .map-reward-step .container.shown,
#map-tutorial-overlay .map-tutorial-step .container.shown,
#map-tutorial-overlay .map-reward-step .container.shown {
  pointer-events: auto;
}

#map-reward-overlay .map-reward-step .container {
  width: 1000px;
}
#map-reward-overlay .map-reward-step .container-title {
  color: #FFFFFF;
}
#map-reward-overlay .map-reward-step .container-title:after {
  background-color: #008550;
}
#map-reward-overlay .map-reward-step .container-button {
  left: initial;
  transform: none;
  right: 0;
  -webkit-transform: translate(25%, 25%);
  -ms-transform: translate(25%, 25%);
  transform: translate(25%, 25%);
}

#map-tutorial-overlay .map-tutorial-step .container:not(.small) {
  max-width: 913px;
}
#map-tutorial-overlay .map-tutorial-step .container .container-content {
  max-width: 560px;
}
#map-tutorial-overlay .map-tutorial-step .container .direction-arrow {
  position: absolute;
  pointer-events: none;
  top: 50%;
}
#map-tutorial-overlay .map-tutorial-step#map-tutorial-step1 .map-cover {
  width: 100%;
  height: 100%;
}
#map-tutorial-overlay .map-tutorial-step#map-tutorial-step2 .map-cover {
  left: 1185px;
  width: 545px;
  height: 940px;
}
#map-tutorial-overlay .map-tutorial-step#map-tutorial-step2 .container {
  left: 84%;
}
#map-tutorial-overlay .map-tutorial-step#map-tutorial-step2 .direction-arrow {
  left: 0;
  -webkit-transform: rotate(-180deg) translate(100%, 0);
  -ms-transform: rotate(-180deg) translate(100%, 0);
  transform: rotate(-180deg) translate(100%, 0);
}
#map-tutorial-overlay .map-tutorial-step#map-tutorial-step3 .map-cover {
  width: 1185px;
  height: 940px;
}
#map-tutorial-overlay .map-tutorial-step#map-tutorial-step3 .container {
  left: 39%;
}
#map-tutorial-overlay .map-tutorial-step#map-tutorial-step3 .direction-arrow {
  right: 0;
  -webkit-transform: translate(75%, -50%);
  -ms-transform: translate(75%, -50%);
  transform: translate(75%, -50%);
}

#helper-button-container,
#helper-overlay,
#helper-confirmation,
#helper-step1,
#helper-step2 {
  pointer-events: none;
}
#helper-button-container.shown,
#helper-overlay.shown,
#helper-confirmation.shown,
#helper-step1.shown,
#helper-step2.shown {
  pointer-events: auto;
}

#helper-button-container {
  position: absolute;
  left: 60px;
  bottom: 70px;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
}
#helper-button-container.shown {
  pointer-events: auto;
}

#helper-button {
  border: none;
  outline: none;
  cursor: pointer;
  background-color: transparent;
  font-family: "Sketchnote Square", sans-serif;
  letter-spacing: 0.04em;
  font-weight: bold;
  font-size: 28px;
  line-height: 1.1;
  text-transform: uppercase;
  color: #FFFFFF;
  border-radius: 25px;
}
#helper-button img, #helper-button svg {
  height: auto;
}
#helper-button .button-inner {
  will-change: transform;
  -webkit-transition: scale 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -moz-transition: scale 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -ms-transition: scale 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -o-transition: scale 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: scale 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#helper-button.disabled, #helper-button:disabled {
  pointer-events: none;
}
#helper-button:active .button-inner {
  scale: 0.95 0.95;
}
#helper-button .button-inner {
  display: flex;
  align-items: center;
  padding: 17px 20px;
  background-color: #293AB7;
  border-radius: 25px;
}
#helper-button img, #helper-button svg {
  min-width: 125px;
  width: 125px;
}
#helper-button .group-left {
  position: relative;
  display: flex;
  line-height: 0;
  padding-right: 28px;
}
#helper-button .group-left:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 2px;
  height: 105px;
  background-image: url("../../images/shapes/vertical-line2.svg");
  background-size: 100% 100%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
#helper-button .group-right {
  padding: 0 28px 0 33px;
}

#helper-overlay {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  background-color: rgba(198, 217, 244, 0.8);
  opacity: 0;
}

#helper-confirmation {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
}
#helper-confirmation #helper-phone {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: absolute;
  left: 586px;
  bottom: -986px;
  width: 772px;
  height: 974px;
  padding: 58px 70px;
  background-color: #293AB7;
  border-top-left-radius: 100px;
  border-top-right-radius: 100px;
}
#helper-confirmation #helper-phone-close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  -webkit-transform: translate(12px, -12px);
  -ms-transform: translate(12px, -12px);
  transform: translate(12px, -12px);
}
#helper-confirmation .helper-message-box,
#helper-confirmation .helper-image-box {
  margin-bottom: 35px;
}
#helper-confirmation .helper-message-box i, #helper-confirmation .helper-message-box em,
#helper-confirmation .helper-image-box i,
#helper-confirmation .helper-image-box em {
  font-style: italic;
}
#helper-confirmation .helper-message-box {
  background-color: #00156B;
  padding: 30px 40px;
  border-radius: 20px;
}
#helper-confirmation .helper-image-box {
  width: 100%;
}
#helper-confirmation .helper-image-box img {
  width: 100%;
  height: auto;
}
#helper-confirmation .group-top {
  display: flex;
  align-items: center;
  width: 100%;
}
#helper-confirmation .group-top p {
  position: relative;
  width: 100%;
  font-family: "Sketchnote Square", sans-serif;
  letter-spacing: 0.04em;
  font-weight: bold;
  font-size: 37px;
  letter-spacing: 7px;
  color: #bdd1f3;
  text-transform: uppercase;
  margin-left: 30px;
  padding-bottom: 18px;
}
#helper-confirmation .group-top p:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-image: url("../../images/shapes/horizontal-line1.svg");
  background-repeat: no-repeat;
  background-size: cover;
}
#helper-confirmation #helper-step1 {
  width: 100%;
}
#helper-confirmation #helper-step1 .group-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
#helper-confirmation #helper-step1 .group-bottom .helper-message-box p {
  font-size: 27px;
  color: #FFFFFF;
}
#helper-confirmation #helper-step1 .group-left,
#helper-confirmation #helper-step1 .group-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 15px;
  width: 50%;
}
#helper-confirmation #helper-step1 .group-left {
  padding-right: 10px;
}
#helper-confirmation #helper-step1 .group-right {
  padding-left: 10px;
}
#helper-confirmation #helper-step2 {
  position: absolute;
  top: 210px;
  left: 0;
  width: 100%;
  height: 825px;
  padding: 0 70px 46px 70px;
  opacity: 0;
}
#helper-confirmation #helper-step2 #helper-textos {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#helper-confirmation #helper-step2 #helper-textos span.inu {
  color: white !important;
  font-weight: bold;
}
#helper-confirmation #helper-step2 .helper-message-box:not(:first-child) {
  align-self: flex-start;
  transform-origin: bottom left;
}
#helper-confirmation #helper-step2 .helper-message-box:not(:first-child) p {
  font-size: 21px;
  color: #FFFFFF;
}
#helper-confirmation #helper-step2 .helper-message-box:first-child {
  align-self: flex-end;
  background-color: #FFEB5A;
  transform-origin: bottom right;
}
#helper-confirmation #helper-step2 .helper-message-box:first-child p {
  font-size: 23px;
  color: #00156B;
}
#helper-confirmation #helper-step2 .helper-image-box {
  transform-origin: bottom left;
}

.myst-remise #background-overlay {
  background-color: #C5D5F4;
  -webkit-transition: background-color 0.5s, opacity 0.25s;
  -moz-transition: background-color 0.5s, opacity 0.25s;
  -ms-transition: background-color 0.5s, opacity 0.25s;
  -o-transition: background-color 0.5s, opacity 0.25s;
  transition: background-color 0.5s, opacity 0.25s;
}
.myst-remise .container {
  margin-right: 90px;
  width: 780px;
}
.myst-remise .screen {
  z-index: unset;
}
.myst-remise .screen[data-type=idle] p {
  font-family: "Sketchnote Square", sans-serif;
  letter-spacing: 0.04em;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 64px;
  line-height: 1.2em;
}
.myst-remise .screen[data-type=idle] .padded-container {
  padding-left: 48px;
  padding-right: 48px;
}
.myst-remise .screen[data-type=instruction] span.subtitle {
  font-weight: bold;
}
.myst-remise .screen[data-type=instruction] span.small {
  font-size: 31px;
}
.myst-remise .screen[data-type=remise-archetype] .container-title {
  color: #FFFFFF;
  --title-width: 100%;
}
.myst-remise .screen[data-type=remise-archetype] .perso-remise {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.myst-remise .screen[data-type=remise-archetype] .archetype-card {
  display: none;
}
.myst-remise .screen[data-type=remise-archetype] .archetype-card .container {
  margin-right: 740px;
  padding-bottom: 46px;
}
.myst-remise .screen[data-type=remise-archetype] .archetype-card .container.no-title {
  padding-top: 60px;
  padding-bottom: 60px;
}
.myst-remise .screen[data-type=remise-archetype] .archetype-card .larger {
  font-family: "Sketchnote Square", sans-serif;
  letter-spacing: 0.04em;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 40px;
  line-height: 1em;
  margin-bottom: 30px;
}
.myst-remise .screen[data-type=remise-archetype] .archetype-card .smaller {
  font-size: 22px;
  line-height: 1.4em;
}
.myst-remise .screen[data-type=remise-archetype] .circle-button {
  position: absolute;
  bottom: 50px;
  right: 40px;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
}
.myst-remise .screen[data-type=remise-archetype] .bag {
  position: relative;
  width: 856px;
  height: 427px;
  margin-top: 30px;
  margin-left: -80px;
  z-index: 1;
  overflow: hidden;
}
.myst-remise .screen[data-type=remise-archetype] .bag .wrapper {
  position: absolute;
  left: 230px;
  top: 50%;
  display: flex;
  flex-wrap: wrap;
  width: 600px;
  height: calc(100% - 50px);
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
.myst-remise .screen[data-type=remise-archetype] .bag .wrapper.grid-row-1 .grid-item {
  height: 100%;
}
.myst-remise .screen[data-type=remise-archetype] .bag .wrapper.grid-row-2 .grid-item {
  height: 50%;
}
.myst-remise .screen[data-type=remise-archetype] .bag .wrapper.grid-row-3 .grid-item {
  height: 33.3333333333%;
}
.myst-remise .screen[data-type=remise-archetype] .bag .wrapper.grid-row-4 .grid-item {
  height: 25%;
}
.myst-remise .screen[data-type=remise-archetype] .bag .wrapper.grid-row-5 .grid-item {
  height: 20%;
}
.myst-remise .screen[data-type=remise-archetype] .bag .wrapper.grid-row-6 .grid-item {
  height: 16.6666666667%;
}
.myst-remise .screen[data-type=remise-archetype] .bag .wrapper.grid-row-7 .grid-item {
  height: 14.2857142857%;
}
.myst-remise .screen[data-type=remise-archetype] .bag .wrapper.grid-row-8 .grid-item {
  height: 12.5%;
}
.myst-remise .screen[data-type=remise-archetype] .bag .wrapper.grid-row-9 .grid-item {
  height: 11.1111111111%;
}
.myst-remise .screen[data-type=remise-archetype] .bag .wrapper.grid-row-10 .grid-item {
  height: 10%;
}
.myst-remise .screen[data-type=remise-archetype] .bag .wrapper.grid-column-1 .grid-item {
  width: 100%;
}
.myst-remise .screen[data-type=remise-archetype] .bag .wrapper.grid-column-2 .grid-item {
  width: 50%;
}
.myst-remise .screen[data-type=remise-archetype] .bag .wrapper.grid-column-3 .grid-item {
  width: 33.3333333333%;
}
.myst-remise .screen[data-type=remise-archetype] .bag .wrapper.grid-column-4 .grid-item {
  width: 25%;
}
.myst-remise .screen[data-type=remise-archetype] .bag .wrapper.grid-column-5 .grid-item {
  width: 20%;
}
.myst-remise .screen[data-type=remise-archetype] .bag .wrapper.grid-column-6 .grid-item {
  width: 16.6666666667%;
}
.myst-remise .screen[data-type=remise-archetype] .bag .wrapper.grid-column-7 .grid-item {
  width: 14.2857142857%;
}
.myst-remise .screen[data-type=remise-archetype] .bag .wrapper.grid-column-8 .grid-item {
  width: 12.5%;
}
.myst-remise .screen[data-type=remise-archetype] .bag .wrapper.grid-column-9 .grid-item {
  width: 11.1111111111%;
}
.myst-remise .screen[data-type=remise-archetype] .bag .wrapper.grid-column-10 .grid-item {
  width: 10%;
}
.myst-remise .screen[data-type=remise-archetype] .bag .grid-item {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px;
}
.myst-remise .screen[data-type=remise-archetype] .bag .grid-item img {
  max-height: 100%;
}
.myst-remise .screen[data-type=remise-ending] .timer-progress {
  position: absolute;
  top: 45px;
  right: 45px;
}
.myst-remise .screen[data-type=remise-ending] .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 1220px;
  margin: 0 auto;
  padding: 150px 96px 100px;
}
.myst-remise .screen[data-type=remise-ending] .container:after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 196px;
  height: 201px;
  background-image: url("../../images/quete/QueteRemise/icone-remise.svg");
  background-size: 100% 100%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.myst-remise .screen[data-type=remise-ending] .container .button.close {
  position: absolute;
  top: 100%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  cursor: pointer;
}
.myst-remise .screen[data-type=remise-ending] .container .button.close .inner {
  background-color: #FFEB5A;
  padding: 18px 40px;
  border-radius: 36px;
  font-family: "Sketchnote Text", sans-serif;
  text-transform: none;
  font-size: 32px;
  font-weight: normal;
  -webkit-transition: transform 0.1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -moz-transition: transform 0.1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -ms-transition: transform 0.1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -o-transition: transform 0.1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: transform 0.1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.myst-remise .screen[data-type=remise-ending] .container .button.close:active .inner {
  -webkit-transform: scale(0.9);
  -ms-transform: scale(0.9);
  transform: scale(0.9);
}
.myst-remise .screen[data-type=remise-ending] p {
  font-family: "Sketchnote Square", sans-serif;
  letter-spacing: 0.04em;
  font-weight: bold;
  text-transform: uppercase;
  color: #00156B;
  font-size: 68px;
  text-align: center;
}
.myst-remise .screen[data-type=remise-ending] p b {
  color: #6176af;
}
.myst-remise.archetype-0 #archetype-0.archetype-card {
  display: block;
}
.myst-remise.archetype-0 #background-overlay {
  background-color: rgba(197, 213, 244, 0.8);
}
.myst-remise.archetype-0 .container-title:after {
  background-color: black;
}
.myst-remise.archetype-0 .bag {
  background: transparent url("../../images/quete/QueteRemise/bag-0.png");
}
.myst-remise.archetype-1 #archetype-1.archetype-card {
  display: block;
}
.myst-remise.archetype-1 #background-overlay {
  background-color: rgba(202, 229, 214, 0.8);
}
.myst-remise.archetype-1 .container-title:after {
  background-color: #00915E;
}
.myst-remise.archetype-1 .bag {
  background: transparent url("../../images/quete/QueteRemise/bag-1.png");
}
.myst-remise.archetype-2 #archetype-2.archetype-card {
  display: block;
}
.myst-remise.archetype-2 #background-overlay {
  background-color: rgba(206, 159, 255, 0.8);
}
.myst-remise.archetype-2 .container-title:after {
  background-color: #8F34D5;
}
.myst-remise.archetype-2 .bag {
  background: transparent url("../../images/quete/QueteRemise/bag-2.png");
}
.myst-remise.archetype-3 #archetype-3.archetype-card {
  display: block;
}
.myst-remise.archetype-3 #background-overlay {
  background-color: rgba(255, 131, 149, 0.8);
}
.myst-remise.archetype-3 .container-title:after {
  background-color: #C1494F;
}
.myst-remise.archetype-3 .bag {
  background: transparent url("../../images/quete/QueteRemise/bag-3.png");
}
.myst-remise.archetype-4 #archetype-4.archetype-card {
  display: block;
}
.myst-remise.archetype-4 #background-overlay {
  background-color: rgba(177, 231, 239, 0.8);
}
.myst-remise.archetype-4 .container-title:after {
  background-color: #01A7D9;
}
.myst-remise.archetype-4 .bag {
  background: transparent url("../../images/quete/QueteRemise/bag-4.png");
}
.myst-remise.archetype-5 #archetype-5.archetype-card {
  display: block;
}
.myst-remise.archetype-5 #background-overlay {
  background-color: rgba(234, 126, 84, 0.8);
}
.myst-remise.archetype-5 .container-title:after {
  background-color: #EA7E54;
}
.myst-remise.archetype-5 .bag {
  background: transparent url("../../images/quete/QueteRemise/bag-5.png");
}

body.debug-mode .language-switcher {
  visibility: visible;
}
body.debug-mode .simulator {
  display: inline-block;
}

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