@charset "UTF-8";

@font-face {
  font-style: normal;
  font-weight: normal;
  font-family: "Work Sans";
  src:
    url("../fonts/WorkSans-Medium.woff2") format("woff2"),
    url("../fonts/WorkSans-Medium.woff") format("woff");
}

:root {
  /* Reglages rapides : schema_parch */
  --schema-width: 700px;
  --schema-offset-x: 0px;
  --schema-offset-y: 0px;

  /* Reglages rapides : deroule */
  --deroule-width: 900px;
  --deroule-offset-x: 0px;
  --deroule-offset-y: 0px;

  /* Reglages rapides : bouton_aventure */
  --bouton-aventure-width: 200px;
  --bouton-aventure-offset-x: 0px;
  --bouton-aventure-offset-y: 320px;
}

.scene {
  min-height: 90vh;
  display: grid;
  place-items: center;
}

.schema-parch {
  width: var(--schema-width);
  max-width: 80vw;
  transform: translate(var(--schema-offset-x), var(--schema-offset-y));
  cursor: pointer;
  transition:
    transform 180ms ease,
    filter 180ms ease;
}

.schema-parch.is-clicked {
  transform: translate(var(--schema-offset-x), var(--schema-offset-y))
    scale(0.96);
}
.schema-parch:hover {
  transform: translate(var(--schema-offset-x), var(--schema-offset-y))
    scale(1.06);
  filter: brightness(1.08);
}

.deroule {
  width: 100%;
  max-width: 100vw;
  left: 50%;
  display: block;
}

.deroule-block {
  width: min(var(--deroule-width), 100vw);
  position: relative;
}

.bouton-aventure {
  width: 50%;
  position: absolute;
  left: 50%;
  bottom: 13%;
  transform: translateX(-50%) translateX(var(--bouton-aventure-offset-x));
  z-index: 2;
  cursor: pointer;
  transition:
    transform 180ms ease,
    filter 180ms ease;
}

.bouton-aventure:hover {
  transform: translateX(-50%) translateX(var(--bouton-aventure-offset-x))
    scale(1.06);
  filter: brightness(1.08);
}

.bouton-aventure:active {
  transform: translateX(-50%) translateX(var(--bouton-aventure-offset-x))
    scale(0.98);
}

.is-hidden {
  display: none;
}