/*!******************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/scss/app.scss ***!
  \******************************************************************************************************************************************************/
@import url(https://fonts.cdnfonts.com/css/andale-mono);
/*!**********************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/scss/app.scss (1) ***!
  \**********************************************************************************************************************************************************/
/**
 * Variables
*/
:root {
  --overlay-menu-width: 2rem;
  --overlay-menu-height: calc(var(--overlay-menu-width) * 45 / 60);
  --video-width: 90rem;
  --video-height: calc(var(--video-width) * 9 / 16);
}

/* Typography */
/* Breakpoints */
/* Paths */
/* Grid setup */
/* Colour palette */
/* Components */
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,
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 {
  border: none;
  font: inherit;
  font-size: 100%;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
}

html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary,
main {
  display: block;
}

audio,
canvas,
video {
  display: inline-block;
}

body {
  margin: 0;
}

ul {
  list-style-type: none;
}

a {
  background: transparent;
  text-decoration: none;
}

button,
input {
  line-height: normal;
}

input[type=search] {
  -webkit-appearance: textfield;
}

input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;
  vertical-align: top;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

textarea:focus,
input:focus {
  outline: 0;
}

input {
  margin: 0;
  padding: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

@font-face {
  font-family: "Anybody";
  src: url(../images/design/Anybody.8bf196.woff2) format("woff2-variations");
  font-style: normal;
  font-weight: 100 900;
}
@font-face {
  font-family: "Articulat CF";
  src: url(../07de0fc29a1e716783f8.otf) format("opentype");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "Articulat CF";
  src: url(../e04e09fe2012912918a3.otf) format("opentype");
  font-weight: 100;
  font-style: italic;
}
@font-face {
  font-family: "Articulat CF";
  src: url(../8aa7e57329f9b3b7dc2b.otf) format("opentype");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "Articulat CF";
  src: url(../27d3e11ed406a4172d64.otf) format("opentype");
  font-weight: 200;
  font-style: italic;
}
@font-face {
  font-family: "Articulat CF";
  src: url(../cc0a7c1d4ac25a599831.otf) format("opentype");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Articulat CF";
  src: url(../c02424778d98bdfcd24b.otf) format("opentype");
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: "Articulat CF";
  src: url(../72b924daad83838df5c5.otf) format("opentype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Articulat CF";
  src: url(../65ad096b5947da2bd719.otf) format("opentype");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "Articulat CF";
  src: url(../f646d93a802717297e4d.otf) format("opentype");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Articulat CF";
  src: url(../e3f9c8b075d7b56ab22c.otf) format("opentype");
  font-weight: 500;
  font-style: italic;
}
@font-face {
  font-family: "Articulat CF";
  src: url(../2a266fd6c217c8992121.otf) format("opentype");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Articulat CF";
  src: url(../da7c49949ca0bebbc53a.otf) format("opentype");
  font-weight: 600;
  font-style: italic;
}
@font-face {
  font-family: "Articulat CF";
  src: url(../5435cb175b238665d4e7.otf) format("opentype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Articulat CF";
  src: url(../d1f78ae750e07aa2f424.otf) format("opentype");
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: "Articulat CF";
  src: url(../1f06394ab0ea6d8e752f.otf) format("opentype");
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: "Articulat CF";
  src: url(../67c9ded9c40661eecaf0.otf) format("opentype");
  font-weight: 800;
  font-style: italic;
}
@font-face {
  font-family: "Articulat CF";
  src: url(../875c069bc9a3dd007d4e.otf) format("opentype");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: "Articulat CF";
  src: url(../528b15096718bea14b7b.otf) format("opentype");
  font-weight: 900;
  font-style: italic;
}
/**
 * Print Stylesheet
*/
@media print {
  @page {
    margin: 1cm;
  }
  body {
    background: #f2f2f2;
    color: #051013;
  }
  a {
    page-break-inside: avoid;
  }
  blockquote {
    page-break-inside: avoid;
  }
  table,
  pre {
    page-break-inside: avoid;
  }
  ul, ol, dl {
    page-break-before: avoid;
  }
}
/* Styles */
:root {
  font-size: 16px;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font: 1rem/1.5 "Articulat CF", sans-serif;
  background-color: #0a171b;
  -webkit-transition: background-color 0.5s;
  transition: background-color 0.5s;
}

.cycle,
.modules {
  opacity: 1;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
}

.dim {
  background-color: #040a0c;
  -webkit-transition: background-color 2s;
  transition: background-color 2s;
}
.dim .film-grain {
  opacity: 0;
  -webkit-transition: opacity 2s;
  transition: opacity 2s;
}

.screen-size-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 100000;
  background: rgb(0, 0, 0);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #f2f2f2;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  text-align: center;
}
.screen-size-overlay h1 {
  font-size: 1.5rem;
  font-weight: 600;
}
.screen-size-overlay p {
  font-size: 1.2rem;
  font-weight: 400;
  max-width: 500px;
  margin-bottom: 2rem;
  opacity: 0.8;
}
.screen-size-overlay a {
  color: #fc4444;
  opacity: 0.8;
  font-size: 1.2rem;
  font-weight: 600;
}

@media (min-width: 1280px) {
  .screen-size-overlay {
    display: none;
  }
}
/* -------------------------------------------------------------------------- */
/*                                 Film grains                                */
/* -------------------------------------------------------------------------- */
.film-grain {
  display: grid;
  place-items: center;
  grid-auto-rows: 100vh;
  -webkit-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
}

.film-grain::before {
  -webkit-animation: grain 8s steps(10) infinite;
          animation: grain 8s steps(10) infinite;
  background-image: url(../images/design/noise.0e8fa5.png);
  content: "";
  height: 300%;
  left: -50%;
  opacity: 0.6;
  position: fixed;
  top: -100%;
  width: 300%;
}

@-webkit-keyframes grain {
  0%, 100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  10% {
    -webkit-transform: translate(-5%, -10%);
            transform: translate(-5%, -10%);
  }
  20% {
    -webkit-transform: translate(-15%, 5%);
            transform: translate(-15%, 5%);
  }
  30% {
    -webkit-transform: translate(7%, -25%);
            transform: translate(7%, -25%);
  }
  40% {
    -webkit-transform: translate(-5%, 25%);
            transform: translate(-5%, 25%);
  }
  50% {
    -webkit-transform: translate(-15%, 10%);
            transform: translate(-15%, 10%);
  }
  60% {
    -webkit-transform: translate(15%, 0%);
            transform: translate(15%, 0%);
  }
  70% {
    -webkit-transform: translate(0%, 15%);
            transform: translate(0%, 15%);
  }
  80% {
    -webkit-transform: translate(3%, 35%);
            transform: translate(3%, 35%);
  }
  90% {
    -webkit-transform: translate(-10%, 10%);
            transform: translate(-10%, 10%);
  }
}

@keyframes grain {
  0%, 100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  10% {
    -webkit-transform: translate(-5%, -10%);
            transform: translate(-5%, -10%);
  }
  20% {
    -webkit-transform: translate(-15%, 5%);
            transform: translate(-15%, 5%);
  }
  30% {
    -webkit-transform: translate(7%, -25%);
            transform: translate(7%, -25%);
  }
  40% {
    -webkit-transform: translate(-5%, 25%);
            transform: translate(-5%, 25%);
  }
  50% {
    -webkit-transform: translate(-15%, 10%);
            transform: translate(-15%, 10%);
  }
  60% {
    -webkit-transform: translate(15%, 0%);
            transform: translate(15%, 0%);
  }
  70% {
    -webkit-transform: translate(0%, 15%);
            transform: translate(0%, 15%);
  }
  80% {
    -webkit-transform: translate(3%, 35%);
            transform: translate(3%, 35%);
  }
  90% {
    -webkit-transform: translate(-10%, 10%);
            transform: translate(-10%, 10%);
  }
}
/* -------------------------------------------------------------------------- */
/*                                  PUI logo                                  */
/* -------------------------------------------------------------------------- */
.logo {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 2000;
  font-family: "Anybody", sans-serif;
  padding: 2rem;
}
.logo a {
  color: #f2f2f2;
  opacity: 0.2;
  font-size: 1.5rem;
  -webkit-transition: 0.3s ease-out;
  transition: 0.3s ease-out;
}
.logo a:hover {
  opacity: 0.7;
}

.heading {
  position: fixed;
  top: 0.2rem;
  left: 0;
  width: 100%;
  pointer-events: none;
  mix-blend-mode: color-dodge;
}
.heading .heading__main {
  display: inline-block;
  color: #402d2d;
  font-weight: 300;
  font-size: clamp(1.5rem, 10vw, 4.5rem);
  white-space: nowrap;
  margin: 0;
  opacity: 1;
  line-height: 0.8;
  text-transform: uppercase;
  margin-top: 1rem;
  will-change: transform;
}

.nav {
  position: fixed;
  top: 1.5rem;
  right: 2rem;
}
.nav a {
  color: #f2f2f2;
}
.nav .nav__main {
  display: inline-block;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1rem;
  color: #402d2d;
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 2px;
  white-space: nowrap;
  margin: 0;
  line-height: 0.8;
  text-transform: uppercase;
  margin-top: 0.8rem;
  will-change: transform;
}

section.intro {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #000;
  cursor: pointer;
}
section.intro .intro__enter {
  text-transform: uppercase;
  letter-spacing: 4px;
  font-weight: 600;
  color: #f2f2f2;
  font-size: 1rem;
  padding: 1rem;
  margin: auto;
  text-align: center;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  display: inline-block;
  -webkit-transition: 0.3s ease-out;
  transition: 0.3s ease-out;
}
section.intro .intro__enter:hover {
  color: #000;
}
section.intro #boxContainer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  overflow: visible;
  position: absolute;
}
section.intro #boxContainer .box {
  background-color: #0a171b;
  position: absolute;
  width: 3rem;
}
section.intro #boxContainer .red {
  background-color: #f2f2f2;
  z-index: 2;
  opacity: 0.1;
  mix-blend-mode: color;
}
section.intro #boxContainer .cyan {
  background-color: #f2f2f2;
  z-index: 1;
  opacity: 0.1;
}
section.intro #boxContainer .box:before {
  padding-top: 100%;
  content: "";
  display: block;
}
section.intro .content {
  position: absolute;
}
section.intro h1 {
  font-size: 3rem;
  font-weight: 400;
  line-height: 1.2;
  color: #fc4444;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
section.intro h1 .lang_fr {
  font-weight: 900;
  position: relative;
  top: -2rem;
}
section.intro h1 .lang_fr .first-line {
  position: relative;
  left: -3rem;
  display: block;
}
section.intro h1 .lang_en {
  font-weight: 300;
  position: relative;
  left: 3rem;
  top: 2rem;
}
section.intro h1 .lang_en .first-line {
  position: relative;
  left: 3rem;
  display: block;
}

.screen {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.screen figure {
  max-width: var(--video-width);
  border-radius: 1rem;
  width: 100%;
  height: 100%;
  max-height: var(--video-height);
  -webkit-filter: drop-shadow(27.2707px 28.6796px 66.4867px rgba(0, 0, 0, 0.14)) drop-shadow(13.8058px 14.5191px 28.984px rgba(0, 0, 0, 0.0945)) drop-shadow(5.45414px 5.73593px 10.8041px rgba(0, 0, 0, 0.07)) drop-shadow(1.19309px 1.25473px 3.84376px rgba(0, 0, 0, 0.0455));
          filter: drop-shadow(27.2707px 28.6796px 66.4867px rgba(0, 0, 0, 0.14)) drop-shadow(13.8058px 14.5191px 28.984px rgba(0, 0, 0, 0.0945)) drop-shadow(5.45414px 5.73593px 10.8041px rgba(0, 0, 0, 0.07)) drop-shadow(1.19309px 1.25473px 3.84376px rgba(0, 0, 0, 0.0455));
}
.screen video {
  width: 100%;
  border-radius: 1rem;
}
.screen .plus-button {
  position: absolute;
  right: 0;
  margin: 2rem;
  cursor: pointer;
  -webkit-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
}
.screen .plus-button svg {
  width: 2rem;
  height: 2rem;
}
section.cycle {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  position: absolute;
  pointer-events: none;
  -webkit-transition: background-color 0.5s ease-in-out;
  transition: background-color 0.5s ease-in-out;
  background-color: rgba(10, 23, 27, 0);
  position: relative;
}
section.cycle .poster {
  position: relative;
  pointer-events: all;
}
section.cycle .poster .poster__container {
  cursor: pointer;
  position: absolute;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
}
section.cycle .poster .poster__container > * {
  position: absolute;
}
section.cycle .poster .poster__container .poster__circle {
  z-index: 3;
  will-change: transform;
}
section.cycle .poster .poster__container .poster__left-mosaic {
  z-index: 2;
  background-color: #03bbbb;
  -webkit-box-shadow: 12.8144px 13.4765px 31.2419px rgba(0, 0, 0, 0.14), 6.48729px 6.82246px 13.6195px rgba(0, 0, 0, 0.0945), 2.56288px 2.69529px 5.0768px rgba(0, 0, 0, 0.07), 0.56063px 0.589595px 1.80617px rgba(0, 0, 0, 0.0455);
          box-shadow: 12.8144px 13.4765px 31.2419px rgba(0, 0, 0, 0.14), 6.48729px 6.82246px 13.6195px rgba(0, 0, 0, 0.0945), 2.56288px 2.69529px 5.0768px rgba(0, 0, 0, 0.07), 0.56063px 0.589595px 1.80617px rgba(0, 0, 0, 0.0455);
  will-change: transform;
}
section.cycle .poster .poster__container .poster__right-mosaic {
  z-index: 1;
  background-color: #fc4444;
  will-change: transform;
}
section.cycle .poster .poster__container img {
  position: absolute;
}
section.cycle .cycle__links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  bottom: 0;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 120%;
  left: -10%;
}
section.cycle .cycle__links a.cycle__link__title {
  position: relative;
}
section.cycle .cycle__links a.cycle__link__title span {
  font-size: 1.35rem;
  font-weight: 900;
  color: #fc4444;
  display: block;
}
section.cycle .cycle__links a.cycle__link__title .cycle__link__title-en {
  font-weight: 400;
  margin-top: 0.5rem;
}
section.cycle .cycle__text__container {
  color: #f2f2f2;
  font-weight: 500;
  opacity: 0.8;
  font-size: 1.2rem;
  letter-spacing: 1px;
  line-height: 1.4;
}
section.cycle .cycle__text__container .cycle__text {
  position: absolute;
  width: 120%;
  left: -10%;
  top: -10rem;
  text-align: center;
  display: none;
}

.cycle.open {
  background-color: rgba(10, 23, 27, 0.9);
}

section.modules {
  --modules-menu-height: 100vh;
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  height: var(--modules-menu-height);
  overflow: hidden;
  pointer-events: none;
}
section.modules .modules__button {
  position: fixed;
  cursor: pointer;
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  pointer-events: all;
}
section.modules .modules__button span {
  text-transform: uppercase;
  display: inline-block;
}
section.modules .modules__button .modules__button__type {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 2.5px;
  color: #03bbbb;
}
section.modules .modules__button .modules__button__slash {
  color: #fc4444;
  font-family: "Andale Mono", sans-serif;
  font-size: clamp(1rem, 5vw, 2.5rem);
  margin: 0 0.5rem;
}
section.modules .modules__menu {
  --modules-menu-width: 780px;
  --separator-width: 54px;
  background-color: rgba(10, 23, 27, 0.9);
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
section.modules .modules__menu .modules__menu__item {
  position: relative;
  height: calc(var(--modules-menu-height) * 1);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
section.modules .modules__menu .modules__menu__item a.modules__menu__item__link {
  z-index: 2;
  width: var(--modules-menu-width);
  font-size: clamp(1rem, 5vw, 2.5rem);
  color: #f2f2f2;
  text-transform: uppercase;
  font-family: "Andale Mono", sans-serif;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  -ms-flex-item-align: center;
      align-self: center;
}
section.modules .modules__menu .modules__menu__item a.modules__menu__item__link span {
  display: block;
}
section.modules .modules__menu .modules__menu__item a.modules__menu__item__link .modules__menu__item__link__title-left {
  text-align: right;
  width: calc((var(--modules-menu-width) - var(--separator-width)) * 0.5);
}
section.modules .modules__menu .modules__menu__item a.modules__menu__item__link .modules__menu__item__link__title-right {
  text-align: left;
  width: 363px;
}
section.modules .modules__menu .modules__menu__item a.modules__menu__item__link .modules__menu__item__link__slash {
  width: var(--separator-width);
  text-align: center;
}
section.modules .modules__menu .modules__menu__item .modules__menu__item__grid {
  z-index: 1;
  position: absolute;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
section.modules .modules__menu .modules__menu__item .modules__menu__item__grid .modules__menu__item__grid__item {
  position: relative;
  will-change: transform;
  grid-column: var(--c);
  grid-row: var(--r);
}
section.modules .modules__menu .modules__menu__item .modules__menu__item__grid .modules__menu__item__grid__item .modules__menu__item__grid__item-img {
  position: relative;
  width: 100%;
  height: auto;
  background-size: cover;
  background-position: 50% 50%;
  will-change: transform, opacity;
}
section.modules .modules__menu .modules__menu__item .modules__menu__item__grid .modules__menu__item__grid__item .modules__menu__item__grid__item-img img {
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
}
section.modules .modules__menu .modules__menu__item .modules__menu__item__grid .modules__menu__item__grid__item .cyan-overlay:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #03bbbb;
  background-color: #fc4444;
  z-index: 10;
  opacity: 1;
  mix-blend-mode: difference;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
section.modules .modules__menu .modules__menu__item .modules__menu__item__grid .modules__menu__item__grid__item .red-overlay:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background-color: #fc4444;
  opacity: 1;
  mix-blend-mode: difference;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}

.modules.open {
  overflow-y: scroll;
}

html.lenis {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  -ms-scroll-chaining: none;
      overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

section.page {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: #fc4444;
}
section.page .wrapper {
  max-width: 1200px;
  margin-left: 5rem;
}
section.page .wrapper h1 {
  font-size: 4rem;
  font-weight: 400;
  line-height: 1.2;
  color: #0a171b;
  margin-top: 50vh;
  margin-bottom: 2remcycl;
}
section.page .wrapper p {
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.6;
  color: #0a171b;
}

.overlay-menu {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  overflow: hidden;
}
.overlay-menu .overlay-menu__switch {
  width: var(--overlay-menu-width);
  height: var(--overlay-menu-height);
  position: fixed;
  right: 0;
  top: 0;
  margin: 2rem;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
  z-index: 10000;
  cursor: pointer;
  pointer-events: all;
}
.overlay-menu .overlay-menu__switch span {
  display: block;
  position: absolute;
  height: 4px;
  width: 100%;
  background: #f2f2f2;
  border-radius: 0px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
.overlay-menu .overlay-menu__switch span:nth-child(1) {
  top: 0px;
}
.overlay-menu .overlay-menu__switch span:nth-child(2),
.overlay-menu .overlay-menu__switch span:nth-child(3) {
  top: 12px;
}
.overlay-menu .overlay-menu__switch span:nth-child(4) {
  top: 24px;
}
.overlay-menu .overlay-menu__switch.dark span {
  background: #0a171b;
}
.overlay-menu .overlay-menu__wrapper {
  color: #f2f2f2;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  gap: 4rem;
  max-width: 1600px;
  margin: auto;
  padding-top: 10rem;
}
.overlay-menu .overlay-menu__wrapper .lang-fr {
  margin-bottom: 1rem;
  font-weight: 600;
}
.overlay-menu .overlay-menu__wrapper .lang-en {
  font-style: italic;
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__links ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__links a {
  color: #f2f2f2;
  font-size: 3rem;
  font-weight: 300;
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__links a:hover {
  color: #fc4444;
  -webkit-transition: color 0.5s;
  transition: color 0.5s;
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__affiche {
  grid-column: 1;
  grid-row: 1/span 2;
  margin-left: 5rem;
  display: none;
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__affiche img {
  max-width: 24rem;
  -webkit-box-shadow: 0px 1.85185px 3.14815px 0px rgba(0, 0, 0, 0.02), 0px 8.14815px 6.51852px 0px rgba(0, 0, 0, 0.03), 0px 20px 13px 0px rgba(0, 0, 0, 0.04), 0px 38.51852px 25.48148px 0px rgba(0, 0, 0, 0.04), 0px 64.81481px 46.85185px 0px rgba(0, 0, 0, 0.05), 0px 100px 80px 0px rgba(0, 0, 0, 0.07);
          box-shadow: 0px 1.85185px 3.14815px 0px rgba(0, 0, 0, 0.02), 0px 8.14815px 6.51852px 0px rgba(0, 0, 0, 0.03), 0px 20px 13px 0px rgba(0, 0, 0, 0.04), 0px 38.51852px 25.48148px 0px rgba(0, 0, 0, 0.04), 0px 64.81481px 46.85185px 0px rgba(0, 0, 0, 0.05), 0px 100px 80px 0px rgba(0, 0, 0, 0.07);
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__links {
  grid-column: 1;
  grid-row: 1/span 3;
  display: none;
  margin-left: 5rem;
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__cycles {
  grid-column: 1/span 2;
  grid-row: 2/span 1;
  margin-bottom: 5rem;
  padding-left: 10rem;
  text-align: right;
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__cycles .overlay-menu__link {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__modules {
  grid-column: 3/span 2;
  grid-row: 2/span 1;
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__cycles,
.overlay-menu .overlay-menu__wrapper .overlay-menu__modules {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2rem 1fr;
  gap: 1.5rem 0;
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__cycles svg,
.overlay-menu .overlay-menu__wrapper .overlay-menu__modules svg {
  height: 2rem;
  position: relative;
  left: -0.6rem;
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__cycles svg path,
.overlay-menu .overlay-menu__wrapper .overlay-menu__modules svg path {
  fill: #fc4444 !important;
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__cycles .overlay-menu__item-title,
.overlay-menu .overlay-menu__wrapper .overlay-menu__modules .overlay-menu__item-title {
  grid-column: 1;
  grid-row: 1;
  color: #fc4444;
  text-transform: uppercase;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 2.5px;
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__cycles .overlay-menu__item-description,
.overlay-menu .overlay-menu__wrapper .overlay-menu__modules .overlay-menu__item-description {
  grid-column: 2/span 1;
  grid-row: 1/span 2;
  margin-right: 5rem;
  display: none;
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__cycles .overlay-menu__item-links,
.overlay-menu .overlay-menu__wrapper .overlay-menu__modules .overlay-menu__item-links {
  grid-column: 1/span 2;
  grid-row: 2/span 1;
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__cycles .overlay-menu__item-links li,
.overlay-menu .overlay-menu__wrapper .overlay-menu__modules .overlay-menu__item-links li {
  margin-bottom: 0.5rem;
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__modules svg {
  left: 1rem;
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__modules svg path {
  fill: #fc4444 !important;
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__item-description {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.5px;
  color: #f2f2f2;
  opacity: 0.5;
  margin: 0.5rem 0;
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__item-description span {
  display: block;
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__link {
  color: #f2f2f2;
  text-decoration: none;
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 1.5px;
  -webkit-transition: color 0.5s;
  transition: color 0.5s;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__link:hover {
  color: #fc4444;
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__link .overlay-menu__link__date {
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 2.5px;
  margin: 0.5rem 0;
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__link .overlay-menu__link__duration {
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 1.5px;
  opacity: 0.5;
  margin: 0.5rem 0;
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__about__title {
  grid-column: 1/span 4;
  text-align: center;
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__about__title h1 {
  font-size: 3rem;
  font-weight: 400;
  color: #fc4444;
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__about__title svg path {
  fill: #fc4444;
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__about {
  background-color: #fc4444;
  color: #0a171b;
  grid-column: 1/span 4;
  padding: 7rem;
  border-radius: 5rem;
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__about .overlay-menu__about__section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10rem;
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__about .overlay-menu__about__section .affiche {
  grid-column: 1/span 2;
  margin-top: 4rem;
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__about .overlay-menu__about__section .affiche img {
  width: 40rem;
  margin: auto;
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__about .overlay-menu__about__section .lang-fr {
  grid-column: 1;
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__about .overlay-menu__about__section .lang-en {
  grid-column: 2;
  font-style: normal;
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__about .overlay-menu__about__section h1 {
  display: none;
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__about .overlay-menu__about__section h2 {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  margin-top: 2rem;
  margin-bottom: 1rem;
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__about .overlay-menu__about__section h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: 2rem;
  line-height: 1.5;
  margin-bottom: 1rem;
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__about .overlay-menu__about__section p {
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.4;
  margin: 0.5rem 0;
  text-align: justify;
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__about .overlay-menu__about__section .surtitle {
  text-transform: uppercase;
  font-family: "Andale Mono";
  display: none;
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__about .overlay-menu__about__section .questions {
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.4;
  margin: 0.5rem 0;
  /* text-align: justify; */
  border-bottom: 2px solid rgba(0, 0, 0, 0.2);
  padding-bottom: 2rem;
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__about .overlay-menu__about__section h4.author {
  font-size: 1.4rem;
  font-weight: 500;
  margin-bottom: 1.5rem;
  opacity: 0.7;
  line-height: 1.2;
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__about .overlay-menu__about__section a {
  color: #0a171b;
  text-decoration: underline;
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__about .overlay-menu__about__section ul {
  list-style: inside;
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__about .overlay-menu__about__section ul li {
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.4;
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__about .overlay-menu__about__section .project p {
  font-size: 1.2rem;
}
.overlay-menu .overlay-menu__wrapper strong {
  font-weight: 600;
}
.overlay-menu .overlay-menu__wrapper em {
  font-style: italic;
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__about__bio,
.overlay-menu .overlay-menu__wrapper .overlay-menu__about__projects {
  margin-top: 4rem;
  background-color: transparent;
  padding: 0;
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__about__bio a,
.overlay-menu .overlay-menu__wrapper .overlay-menu__about__projects a {
  color: #0a171b;
  text-decoration: underline;
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__about__bio::before,
.overlay-menu .overlay-menu__wrapper .overlay-menu__about__projects::before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: rgba(0, 0, 0, 0.2);
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__about__bio h2,
.overlay-menu .overlay-menu__wrapper .overlay-menu__about__projects h2 {
  font-size: 1.7rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  margin-top: 4rem !important;
  margin-bottom: 1rem !important;
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__about__bio h3.name,
.overlay-menu .overlay-menu__wrapper .overlay-menu__about__projects h3.name {
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: 2rem;
  line-height: 1.2;
  margin-bottom: 1rem;
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__about__bio p,
.overlay-menu .overlay-menu__wrapper .overlay-menu__about__projects p {
  font-size: 1.2rem !important;
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__about__media {
  margin-left: 14rem;
  margin-right: 14rem;
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__about__media .overlay-menu__about__section {
  row-gap: 0rem;
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__about__media h3.name {
  font-size: 1.5rem;
  font-weight: 600;
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__about__media .lang-fr {
  grid-column: 1/span 2 !important;
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__about__media .bibliography {
  grid-column: 1/span 2;
  padding-right: 5rem;
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__about__media ul {
  list-style: none !important;
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__about__media ul li {
  margin-bottom: 0.5rem !important;
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__about_intro {
  background-color: transparent;
  color: #f2f2f2;
  padding-left: 10rem;
  padding-right: 10rem;
  padding-top: 1rem;
  padding-bottom: 0rem;
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__about_intro p {
  font-weight: 500 !important;
  font-size: 1.4rem !important;
  line-height: 1.6 !important;
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__about_intro .lang-en p {
  font-weight: 300 !important;
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__about_intro .overlay-menu__about__section {
  display: grid;
  grid-template-columns: 1fr 1fr !important;
  gap: 4rem;
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__about__encounter {
  background-color: #03bbbb;
  margin-left: 5rem;
  margin-right: 5rem;
  padding-left: 7rem;
  padding-right: 7rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__about__encounter .overlay-menu__about__section {
  gap: 7rem;
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__about__encounter p {
  text-align: justify;
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__about__encounter__link {
  display: inline-block;
  text-align: center;
  margin: auto;
  margin-top: 3rem;
  cursor: pointer;
  -ms-flex-item-align: center;
      align-self: center;
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__about__encounter__link span {
  font-size: 1.2rem;
  color: #0a171b;
  font-weight: 600;
  display: inline-block;
  padding: 1rem 2rem;
  border-radius: 10rem;
  background-color: rgba(0, 0, 0, 0.1);
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__about__media {
  background-color: #03bbbb;
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__about__credits {
  background-color: transparent;
  margin-left: 10rem;
  margin-right: 10rem;
  color: #f2f2f2;
  padding-top: 2rem;
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__about__credits a {
  color: #f2f2f2 !important;
  text-decoration: underline !important;
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__about__credits strong {
  font-size: 1rem !important;
}
.overlay-menu .overlay-menu__wrapper .overlay-menu__about__credits p {
  font-size: 1rem !important;
}

.overlay-menu.open {
  background-image: radial-gradient(circle at center, #091417 0%, #091417 50%, rgba(9, 20, 23, 0.9) 100%);
  overflow-y: scroll;
}
.overlay-menu.open .overlay-menu__switch span:nth-child(2) {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.overlay-menu.open .overlay-menu__switch span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.overlay-menu.open .overlay-menu__switch span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
}
.overlay-menu.open .overlay-menu__switch span:nth-child(1) {
  top: 18px;
  width: 0%;
  left: 50%;
}

.overlay-affiche {
  grid-column: 2/span 2;
}
.overlay-affiche img {
  margin: auto;
}

/*Layout*/
.film-grain {
  z-index: 1;
}

.heading {
  z-index: 1500;
}

.intro {
  z-index: 1200;
}

.overlay-menu {
  z-index: 1000;
}

.screen {
  z-index: 50;
}

.modules {
  z-index: 300;
}

.cycle {
  z-index: 400;
}

.page {
  z-index: 300;
  display: none;
}

.logo__wrapper {
  display: none;
}
/*!******************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/splitting/dist/splitting.css ***!
  \******************************************************************************************************************************************************************************/
/* Recommended styles for Splitting */
.splitting .word,
.splitting .char {
  display: inline-block;
}

/* Psuedo-element chars */
.splitting .char {
  position: relative;
}

/**
 * Populate the psuedo elements with the character to allow for expanded effects
 * Set to `display: none` by default; just add `display: block` when you want
 * to use the psuedo elements
 */
.splitting .char::before,
.splitting .char::after {
  content: attr(data-char);
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  -webkit-transition: inherit;
  transition: inherit;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

/* Expanded CSS Variables */
.splitting {
  /* The center word index */
  --word-center: calc((var(--word-total) - 1) / 2);
  /* The center character index */
  --char-center: calc((var(--char-total) - 1) / 2);
  /* The center character index */
  --line-center: calc((var(--line-total) - 1) / 2);
}

.splitting .word {
  /* Pecent (0-1) of the word's position */
  --word-percent: calc(var(--word-index) / var(--word-total));
  /* Pecent (0-1) of the line's position */
  --line-percent: calc(var(--line-index) / var(--line-total));
}

.splitting .char {
  /* Percent (0-1) of the char's position */
  --char-percent: calc(var(--char-index) / var(--char-total));
  /* Offset from center, positive & negative */
  --char-offset: calc(var(--char-index) - var(--char-center));
  /* Absolute distance from center, only positive */
  --distance: calc(
     (var(--char-offset) * var(--char-offset)) / var(--char-center)
  );
  /* Distance from center where -1 is the far left, 0 is center, 1 is far right */
  --distance-sine: calc(var(--char-offset) / var(--char-center));
  /* Distance from center where 1 is far left/far right, 0 is center */
  --distance-percent: calc((var(--distance) / var(--char-center)));
}
/*!************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/splitting/dist/splitting-cells.css ***!
  \************************************************************************************************************************************************************************************/
.splitting.cells img {
  width: 100%;
  display: block;
}

@supports (display: grid) {
  .splitting.cells {
    position: relative;
    overflow: hidden;
    background-size: cover;
    visibility: hidden;
  }
  .splitting .cell-grid {
    background: inherit;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template: repeat(var(--row-total), 1fr)/repeat(var(--col-total), 1fr);
  }
  .splitting .cell {
    background: inherit;
    position: relative;
    overflow: hidden;
  }
  .splitting .cell-inner {
    background: inherit;
    position: absolute;
    visibility: visible;
    /* Size to fit the whole container size */
    width: calc(100% * var(--col-total));
    height: calc(100% * var(--row-total));
    /* Position properly */
    left: calc(-100% * var(--col-index));
    top: calc(-100% * var(--row-index));
  }
  /* Helper variables for advanced effects */
  .splitting .cell {
    --center-x: calc((var(--col-total) - 1) / 2);
    --center-y: calc((var(--row-total) - 1) / 2);
    /* Offset from center, positive & negative */
    --offset-x: calc(var(--col-index) - var(--center-x));
    --offset-y: calc(var(--row-index) - var(--center-y));
    /* Absolute distance from center, only positive */
    --distance-x: calc( (var(--offset-x) * var(--offset-x)) / var(--center-x) );
    /* Absolute distance from center, only positive */
    --distance-y: calc( (var(--offset-y) * var(--offset-y)) / var(--center-y) );
  }
}