@charset "UTF-8";
@font-face {
  font-family: "Eurostile ExtendedTwo";
  src: url("Eurostile-BoldExtendedTwo.woff2") format("woff2"), url("Eurostile-BoldExtendedTwo.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gill Sans";
  src: url("GillSans-SemiBold.woff2") format("woff2"), url("GillSans-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bungee";
  src: url("Bungee-Regular.woff2") format("woff2"), url("Bungee-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aeonik MGEN";
  src: url("AeonikMGEN-Regular.woff2") format("woff2"), url("AeonikMGEN-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aeonik MGEN";
  src: url("AeonikMGEN-Medium.woff2") format("woff2"), url("AeonikMGEN-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aeonik MGEN";
  src: url("AeonikMGEN-Bold.woff2") format("woff2"), url("AeonikMGEN-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Ringbearer";
  src: url("RingbearerMedium.woff2") format("woff2"), url("RingbearerMedium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "web-utils";
  src: url("web-utils.eot?bv694z");
  src: url("web-utils.eot?bv694z#iefix") format("embedded-opentype"), url("web-utils.ttf?bv694z") format("truetype"), url("web-utils.woff?bv694z") format("woff"), url("web-utils.svg?bv694z#web-utils") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
.icon {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "web-utils" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-dwl:before {
  content: "\e900";
}

.icon-home:before {
  content: "\e901";
}

.icon-new-tab:before {
  content: "\ea7e";
}

:root {
  --typo-font-family: "Aeonik MGEN", Arial, sans-serif;
  --typo-font-family-2: "Eurostile ExtendedTwo", Arial, sans-serif;
  --typo-font-family-3: "Bungee", Arial, sans-serif;
  --typo-font-family-4: "Gill Sans", Arial, sans-serif;
  --typo-font-family-5: "Ringbearer", Arial, sans-serif;
  --typo-icon: "web-utils";
  --titre_campagne_font: var(--typo-font-family-3);
  --titre_campagne_weight: normal;
  --header_ep_font: var(--typo-font-family-3);
  --header_ep_weight: normal;
  --nav_text_font_family: var(--typo-font-family);
  --nav_text_font_weight: 500;
  --burger_font_family: var(--typo-font-family);
  --burger_font_weight: 500;
  --burger_ep_font_family: var(--typo-font-family-3);
  --burger_ep_font_weight: normal;
  --burger_ep_title_font_family: var(--typo-font-family);
  --burger_ep_title_font_weight: bold;
  --burger_ep_subtitle_font_family: var(--burger_font_family);
  --burger_ep_subtitle_font_weight: var(--burger_font_weight);
  --production_font_family: var(--typo-font-family);
  --production_font_weight: 500;
  --accueil_ep_title_font_family: var(--typo-font-family-2);
  --accueil_ep_title_font_weight: bold;
  --accueil_ep_subtitle_font_family: var(--typo-font-family-4);
  --accueil_ep_subtitle_font_weight: 600;
  --accueil_ep2_title_font_family: var(--typo-font-family-5);
  --accueil_ep2_title_font_weight: 500;
  --accueil_ep3_title_font_family: var(--typo-font-family);
  --accueil_ep3_title_font_weight: 500;
  --accueil_ep4_title_font_family: var(--typo-font-family);
  --accueil_ep4_title_font_weight: 500;
  --accueil_ep5_title_font_family: var(--typo-font-family);
  --accueil_ep5_title_font_weight: 500;
  --titre_ep_font: var(--typo-font-family-2);
  --titre_ep_font_weight: bold;
  --sous_titre_ep_font: var(--typo-font-family);
  --sous_titre_ep_font_weight: bold;
  --bp_texte_font: var(--typo-font-family);
  --bp_texte_font_weight: normal;
  --bp_first_p_font: var(--bp_texte_font);
  --bp_first_p_font_weight: bold;
  --bp_second_p_font: var(--bp_texte_font);
  --bp_second_p_font_weight: bold;
  --bp_third_p_font: var(--bp_texte_font);
  --bp_third_p_font_weight: normal;
  --bp_accent_font: var(--typo-font-family-2);
  --bp_accent_font_weight: bold;
  --signature_font_family: var(--typo-font-family);
  --signature_font_family_weight: normal;
}

:root {
  --green-mgen: #80b323;
  --bleu-nuit: #010e20;
  --black: #000000;
  --white: #FFFFFF;
  --beige: #f2dfbd;
  --red: #c2292a;
  --deepblue: #030c21;
  --primary: var(--green-mgen);
  --primary-contrast: var(--white);
  --main_background: var(--black);
  --main_color: var(--white);
  --header_background: var(--black);
  --header_background2: var(--green-mgen);
  --header_color: var(--black);
  --header_color2: var(--white);
  --episode_background: var(--primary);
  --episode_color: var(--primary-contrast);
  --burger_background: var(--primary);
  --burger_color: var(--bleu-nuit);
  --burger_ep_title_color: var(--primary-contrast);
  --burger_ep_hover_background: var(--bleu-nuit);
  --burger_ep_hover_color: var(--primary);
  --burger_bt_hover_color: var(--primary-contrast);
  --nav_background: var(--primary-contrast);
  --nav_color: var(--primary);
  --nav_hover_background: var(--nav_color);
  --nav_hover_color: var(--nav_background);
  --accueil_ep_title_color: var(--black);
  --accueil_ep_subtitle_color: var(--white);
  --accueil_ep2_title_color: var(--beige);
  --accueil_ep3_title_color: var(--red);
  --accueil_ep4_title_color: var(--red);
  --accueil_ep5_title_color: var(--black);
  --bd_bullets_background: var (--nav_background);
  --bd_bullets_color: var (--nav_color);
  --bd_bullets_hover_background: var (--bd_bullets_color);
  --bd_bullets_hover_color: var (--bd_bullets_background);
  --bd_nav_background: var (--nav_background);
  --bd_nav_color: var (--nav_color);
  --bd_nav_hover_background: var (--bd_nav_color);
  --bd_nav_hover_color: var (--bd_nav_background);
  --bp_color: var(--main_color);
  --bp_background: var(var(--main_background));
  --bp_title_color: var(--main_color);
  --bp_emphase_color: var(--green-mgen);
}

#CINECYBER {
  /* disque blanc */
  /* conteneur interne */
  /* souris */
  /* molette fixe */
  /* points au centre */
  /* positions verticales des 3 points */
  /* 18px */
  /* 22px */
  /* 26px */
  /* flèche */
  /* ---- animations ---- */
  /* flèche descend puis s'efface, pas de retour visible */
  /* apparition progressive des points */
}
#CINECYBER *,
#CINECYBER ::before,
#CINECYBER ::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
#CINECYBER [inert] {
  pointer-events: none;
}
#CINECYBER menu,
#CINECYBER ol,
#CINECYBER ul {
  list-style: none;
  margin: 0 0 0.5em;
  padding: 0;
}
#CINECYBER li {
  padding: 0 0 0 1.1em;
  margin: 0 0 0.3em 0;
  position: relative;
  line-height: 1.2;
}
#CINECYBER li::before {
  content: "";
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  border-radius: 50%;
  line-height: 1;
  position: absolute;
  top: 0.4em;
  left: 0.3em;
  background-color: var(--primary);
}
#CINECYBER li li {
  padding: 0 0 0 0.8em;
  margin: 0.2em 0 0 0;
}
#CINECYBER li li::before {
  content: "-";
  font-size: 1em;
  line-height: inherit;
  position: absolute;
  top: 0;
  left: 0.3em;
  width: auto;
  height: auto;
  background-color: transparent;
  border-radius: initial;
}
#CINECYBER b,
#CINECYBER strong {
  font-weight: bold;
  font-style: normal;
}
#CINECYBER u {
  text-decoration: underline;
}
#CINECYBER em {
  font-weight: bold;
  font-style: italic;
}
#CINECYBER a {
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
#CINECYBER a:hover {
  border-bottom: 1px dashed;
}
#CINECYBER a:active {
  border-bottom: 1px dashed;
}
#CINECYBER img {
  width: 100%;
  height: auto;
}
#CINECYBER #header,
#CINECYBER #main,
#CINECYBER #footer {
  width: 100%;
  float: left;
}
#CINECYBER p {
  margin: 0 0 0.5em;
}
#CINECYBER p:has(+ ul) {
  margin: 0 0 0.2em;
}
#CINECYBER span {
  display: inline-block;
  font-family: inherit;
}
#CINECYBER button {
  border: none;
  cursor: pointer;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  font-size: inherit;
  font-weight: inherit;
  font-style: inherit;
  line-height: 1;
  padding: 0;
}
#CINECYBER h1,
#CINECYBER h2,
#CINECYBER h3,
#CINECYBER h4,
#CINECYBER h5,
#CINECYBER h6 {
  margin: 0 0 0.5em;
}
#CINECYBER form,
#CINECYBER legend,
#CINECYBER fieldset {
  margin: 0;
  padding: 0;
  border: none;
}
#CINECYBER input {
  cursor: pointer;
}
#CINECYBER.no-scrollbar {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}
#CINECYBER.no-scrollbar::-webkit-scrollbar {
  display: none;
}
#CINECYBER .scroll-bubble {
  width: 5.625em;
  /* 90px */
  height: 5.625em;
  /* 90px */
  background: #fff;
  border-radius: 50%;
  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;
  margin: 0 0 4em;
  font-size: 0.8em;
  z-index: 1;
}
@container main_container (min-width: 20em) {
  #CINECYBER .scroll-bubble {
    font-size: calc(0.8em + 0.2 * (100cqw - 20rem) / 60);
  }
}
@container main_container (min-width: 80em) {
  #CINECYBER .scroll-bubble {
    position: absolute;
    top: 39rem;
    top: 48rem;
    top: calc(39rem + 9 * (100cqw - 80rem) / 40);
    right: 17.5rem;
    right: 22rem;
    right: calc(17.5rem + 4.5 * (100cqw - 80rem) / 40);
    margin: 0;
    font-size: 1.1em;
    font-size: calc(1em + 0.1 * (100cqw - 80rem) / 40);
  }
}
@container main_container (min-width: 120em) {
  #CINECYBER .scroll-bubble {
    font-size: 1.1em;
  }
}
#CINECYBER .scroll-icon {
  position: relative;
  width: 3.125em;
  /* 50px */
  height: 4.375em;
  /* 70px */
}
#CINECYBER .scroll-icon .mouse {
  position: absolute;
  top: 0;
  left: 50%;
  width: 2em;
  /* 32px */
  height: 3em;
  /* 48px */
  border: 0.125em solid #000;
  /* 2px */
  border-radius: 1em;
  /* 16px */
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
#CINECYBER .scroll-icon .wheel {
  width: 0.375em;
  /* 6px */
  height: 0.375em;
  /* 6px */
  background: #000;
  border-radius: 50%;
  position: absolute;
  top: 0.5em;
  /* 8px */
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
#CINECYBER .scroll-icon .dot {
  width: 0.125em;
  /* 2px */
  height: 0.125em;
  /* 2px */
  background: #000;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  opacity: 0;
}
#CINECYBER .scroll-icon .dot-1 {
  top: 1.125em;
  -webkit-animation: dot1 2s linear infinite;
          animation: dot1 2s linear infinite;
}
#CINECYBER .scroll-icon .dot-2 {
  top: 1.375em;
  -webkit-animation: dot2 2s linear infinite;
          animation: dot2 2s linear infinite;
}
#CINECYBER .scroll-icon .dot-3 {
  top: 1.625em;
  -webkit-animation: dot3 2s linear infinite;
          animation: dot3 2s linear infinite;
}
#CINECYBER .scroll-icon .arrow {
  position: absolute;
  left: 50%;
  top: 1.125em;
  /* 18px */
  width: 0;
  height: 2.125em;
  /* 34px */
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  -webkit-animation: arrow-down 2s ease-in-out infinite;
          animation: arrow-down 2s ease-in-out infinite;
}
#CINECYBER .scroll-icon .arrow::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 0.125em;
  /* 2px */
  height: 2.125em;
  /* 34px */
  background: #000;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
#CINECYBER .scroll-icon .arrow::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0.75em;
  /* 12px */
  height: 0.75em;
  /* 12px */
  border-right: 0.125em solid #000;
  /* 2px */
  border-bottom: 0.125em solid #000;
  /* 2px */
  -webkit-transform: translate(-50%, 0) rotate(45deg);
          transform: translate(-50%, 0) rotate(45deg);
}
@-webkit-keyframes arrow-down {
  0% {
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
    opacity: 1;
  }
  60% {
    -webkit-transform: translate(-50%, 0.875em);
            transform: translate(-50%, 0.875em);
    opacity: 1;
  }
  /* 14px */
  80% {
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
    opacity: 0;
  }
}
@keyframes arrow-down {
  0% {
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
    opacity: 1;
  }
  60% {
    -webkit-transform: translate(-50%, 0.875em);
            transform: translate(-50%, 0.875em);
    opacity: 1;
  }
  /* 14px */
  80% {
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
    opacity: 0;
  }
}
@-webkit-keyframes dot1 {
  0%, 30% {
    opacity: 0;
  }
  40%, 100% {
    opacity: 1;
  }
}
@keyframes dot1 {
  0%, 30% {
    opacity: 0;
  }
  40%, 100% {
    opacity: 1;
  }
}
@-webkit-keyframes dot2 {
  0%, 40% {
    opacity: 0;
  }
  50%, 100% {
    opacity: 1;
  }
}
@keyframes dot2 {
  0%, 40% {
    opacity: 0;
  }
  50%, 100% {
    opacity: 1;
  }
}
@-webkit-keyframes dot3 {
  0%, 50% {
    opacity: 0;
  }
  60%, 100% {
    opacity: 1;
  }
}
@keyframes dot3 {
  0%, 50% {
    opacity: 0;
  }
  60%, 100% {
    opacity: 1;
  }
}

.accessibilite {
  padding: 0;
  margin: 0;
  position: absolute;
  left: -99999999px;
}

.screen-reader {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}

.screen-reader-focusable:active, .screen-reader-focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: normal;
  width: auto;
}

#accessibility {
  padding: 0 6.25% 0.5em;
  width: 100%;
  text-align: right;
}

html {
  font-size: 100%;
  background-color: var(--main_background);
  color: var(--main_color);
  height: 100%;
}

body {
  background-image: url(../ep1/img/fond_etoiles_mobile.png);
  background-size: 100% auto;
  background-position: top center;
  background-repeat: repeat;
  background-color: var(--main_background);
  font-style: normal;
  font-weight: normal;
  min-height: 100%;
  margin: auto;
  font-size: 1em;
  line-height: 1.2;
  color: var(--main_color);
  text-size-adjust: none;
  -webkit-text-size-adjust: none;
  -ms-text-size-adjust: none;
  -moz-text-size-adjust: none;
  font-family: var(--typo-font-family);
  -webkit-box-shadow: 0em 0em 1em 1px rgba(22, 88, 171, 0.5);
          box-shadow: 0em 0em 1em 1px rgba(22, 88, 171, 0.5);
  overflow: hidden;
}
@media screen and (min-width: 48em) {
  body {
    background-image: url(../ep1/img/fond_etoiles.png);
  }
}

#CINECYBER {
  width: 100%;
  min-height: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: auto;
  container-type: inline-size;
  container-name: main_container;
}
@container main_container (min-width: 100em) {
  #CINECYBER::after {
    content: "";
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 6.625em;
    max-width: 41.25em;
    background-color: var(--header_background2);
    background: -webkit-gradient(linear, right top, left top, color-stop(60%, rgb(128, 179, 35)), to(rgba(128, 179, 35, 0)));
    background: linear-gradient(-90deg, rgb(128, 179, 35) 60%, rgba(128, 179, 35, 0) 100%);
    -webkit-transition-property: opacity, -webkit-transform;
    transition-property: opacity, -webkit-transform;
    transition-property: transform, opacity;
    transition-property: transform, opacity, -webkit-transform;
    -webkit-transition-duration: 0.5s;
            transition-duration: 0.5s;
    z-index: 1;
  }
}

.menu-open #CINECYBER {
  pointer-events: none;
  overflow: hidden;
}
.menu-open #CINECYBER::before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: #000000;
  opacity: 0.5;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}
.menu-open #CINECYBER #epnb, .menu-open #CINECYBER #logo {
  opacity: 0;
}

#CINECYBER.header-hidden header #header {
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
  opacity: 0;
}
#CINECYBER.header-hidden::after {
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
  opacity: 0;
}
#CINECYBER header {
  overflow: visible;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  max-width: 100cqw;
  z-index: 999;
}
@media (min-width: 100em) {
  @container main_container (min-width: 100em) {
    #CINECYBER header {
      position: fixed;
      left: 50%;
      -webkit-transform: translateX(-50%);
              transform: translateX(-50%);
    }
  }
}
#CINECYBER header #header {
  width: 100%;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  position: relative;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
  -webkit-transition-duration: 0.5s;
          transition-duration: 0.5s;
}
#CINECYBER header #header::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: 41.25em;
  background-color: var(--header_background2);
  background: -webkit-gradient(linear, left top, right top, color-stop(60%, rgb(128, 179, 35)), to(rgba(128, 179, 35, 0)));
  background: linear-gradient(90deg, rgb(128, 179, 35) 60%, rgba(128, 179, 35, 0) 100%);
  z-index: 0;
}
#CINECYBER header #header #logo {
  width: 6.6875em;
  aspect-ratio: 224/269;
  line-height: 1;
  margin: 0;
  text-align: center;
  text-indent: -9999999px;
  font-size: 1em;
  position: absolute;
  top: calc(100% + 0.5em);
  right: 0;
  -webkit-transform: translateY(50%);
          transform: translateY(50%);
  overflow: hidden;
  font-size: calc(0.45em + 0.55 * (100cqw - 20em) / 100);
}
@container main_container (min-width: 31.25em) {
  #CINECYBER header #header #logo {
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    top: calc(100% - 0.5em);
  }
}
#CINECYBER header #header #logo:after {
  content: "";
  background: url(../img/logo_white.png);
  background-image: url(../img/logo_white.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#CINECYBER header h1 {
  -webkit-box-flex: 1;
      -ms-flex: auto;
          flex: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  font-size: 1em;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0;
  z-index: 1;
}
#CINECYBER header h1 #campaign_title {
  font-family: var(--titre_campagne_font);
  font-weight: var(--titre_campagne_weight);
  color: var(--header_color);
  text-transform: uppercase;
  font-size: 1.625em;
  margin: 0 5% 0 0;
  font-size: calc(0.8125em + 0.8125 * (100cqw - 20em) / 100);
}
#CINECYBER header h1 #campaign_title .accent {
  display: block;
  color: var(--header_color2);
  font-size: 1.2692em;
}
#CINECYBER header h1 #epnb {
  font-family: var(--header_ep_font);
  font-weight: var(--header_ep_weight);
  background-color: var(--header_background2);
  border-radius: 0.5em;
  text-transform: uppercase;
  font-size: 1.5625em;
  font-size: calc(0.8125em + 0.75 * (100cqw - 20em) / 100);
  padding: 0.3em 0.5em;
  line-height: 1;
}
#CINECYBER header h1 #epnb .ep {
  display: none;
}
@container main_container (min-width: 20em) {
  #CINECYBER header h1 #epnb .ep {
    display: inline;
  }
  #CINECYBER header h1 #epnb .diese {
    display: none;
  }
}
@container main_container (min-width: 48em) {
  #CINECYBER header h1 #epnb .diese {
    display: none;
  }
}

#CINECYBER #main {
  margin-top: 3rem;
  margin-top: 5.8rem;
  overflow: auto;
  margin-top: calc(3rem + 2.8 * (100cqw - 20rem) / 80);
}
@container main_container (min-width: 100em) {
  #CINECYBER #main {
    margin-top: 0;
  }
}
#CINECYBER .accueil,
#CINECYBER .bd,
#CINECYBER .bp {
  width: 100%;
  height: auto;
  overflow: hidden;
}
@container main_container (min-width: 48em) {
  #CINECYBER .accueil,
  #CINECYBER .bp {
    min-height: 48.8cqw;
  }
}

#CINECYBER #footer {
  overflow: visible;
  position: relative;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  padding: 0;
}
@container main_container (min-width: 100em) {
  #CINECYBER #footer {
    -webkit-transform: translate(-100%) rotate(-90deg);
            transform: translate(-100%) rotate(-90deg);
    -webkit-transform-origin: top right;
            transform-origin: top right;
    position: fixed;
    top: 0;
    left: 0;
    width: 100dvh;
    min-width: 48.8cqw;
    z-index: 99;
    padding: 0.5em 0 0 0;
  }
}
#CINECYBER #footer span.pellicule {
  width: 100%;
  height: 6em;
  height: 13em;
  height: calc(6em + 7 * (100cqw - 20em) / 80);
  overflow: hidden;
  position: relative;
}
#CINECYBER #footer span.pellicule::after {
  content: "";
  background-image: url(../img/pellicule_bg.png);
  background-size: 1.875em auto;
  background-position: top left;
  background-repeat: repeat-x;
  position: absolute;
  top: 0;
  right: 0;
  width: 110%;
  height: 100%;
  z-index: 0;
  -webkit-transform-origin: top right;
          transform-origin: top right;
  -webkit-transform: skew(5deg, -5deg);
          transform: skew(5deg, -5deg);
  /*
  transform:
      skewX(calc(13deg + (-8deg) * ((100cqw - 20em) / (100em - 20em))))
      skewY(calc(-13deg + ( 8deg) * ((100cqw - 20em) / (100em - 20em))));
  */
}
@container main_container (min-width: 100em) {
  #CINECYBER #footer span.pellicule {
    display: none;
  }
}
#CINECYBER #footer span.signature {
  width: 100%;
  font-size: 0.6875em;
  background-color: #000000;
  position: relative;
  z-index: 1;
  padding: 0 5% 2.5em;
}
@container main_container (min-width: 100em) {
  #CINECYBER #footer span.signature {
    background-color: transparent;
  }
}

#CINECYBER button {
  background-color: var(--nav_background);
  color: var(--nav_color);
  padding: 0.4em 1em;
  border-radius: 0.5em;
  font-family: var(--nav_text_font_family);
  font-weight: var(--nav_text_font_weight);
  font-size: 1.125em;
  font-size: 1.5625em;
  font-size: calc(1.125em + 0.4375 * (100cqw - 20em) / 100);
  margin: 0 0 4em;
}
#CINECYBER button:hover, #CINECYBER button:focus {
  background-color: var(--nav_hover_background);
  color: var(--nav_hover_color);
}

#CINECYBER #menuToggle {
  position: relative;
  width: 2em;
  height: 2em;
  background-color: transparent;
  margin: 0 0.5em 1em 0.5em;
  -webkit-box-flex: 0;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
}
@container main_container (min-width: 31.25em) {
  #CINECYBER #menuToggle {
    margin: 0 0 0 0;
  }
}
#CINECYBER #menuToggle span {
  width: 100%;
  height: 0.3em;
  background-color: var(--primary-contrast);
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  border-radius: 0.3rem;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
#CINECYBER #menuToggle::before, #CINECYBER #menuToggle::after {
  content: "";
  width: 100%;
  height: 0.3em;
  background-color: var(--primary-contrast);
  position: absolute;
  display: block;
  border-radius: 0.3rem;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  left: 0;
}
#CINECYBER #menuToggle::before {
  top: 0;
}
#CINECYBER #menuToggle::after {
  bottom: 0;
}
#CINECYBER #menuToggle:hover span, #CINECYBER #menuToggle:hover::before, #CINECYBER #menuToggle:hover::after {
  background-color: var(--text-black);
}
#CINECYBER #menuToggle.open span {
  opacity: 0;
}
#CINECYBER #menuToggle.open::before {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
          transform: translate(-50%, -50%) rotate(45deg);
}
#CINECYBER #menuToggle.open::after {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
          transform: translate(-50%, -50%) rotate(-45deg);
}
#CINECYBER #menuwrapper {
  text-align: left;
  background-color: var(--burger_background);
  color: var(--burger_color);
  display: none;
  width: 100%;
  font-size: 1.6em;
}
#CINECYBER #menuwrapper ul {
  counter-reset: listCounter;
  padding: 0;
  margin: 0;
}
#CINECYBER #menuwrapper ul::before {
  content: "";
  width: calc(100% - 1em);
  height: 1px;
  background-color: var(--burger_color);
  display: block;
  position: absolute;
  top: 0;
  left: 1em;
}
#CINECYBER #menuwrapper ul li {
  counter-increment: listCounter;
  font-size: 1em;
  font-weight: 500;
  color: var(--menuEp_burger-color);
  line-height: 1;
  padding: 0;
  margin: 0;
}
#CINECYBER #menuwrapper ul li::before {
  content: none;
}
#CINECYBER #menuwrapper ul li a {
  border: none;
  padding: 2em 1.5em 0.5em 1em;
  position: relative;
}
#CINECYBER #menuwrapper ul li a::after {
  content: "";
  width: 44%;
  height: 1px;
  background-color: var(--burger_color);
  display: block;
  position: absolute;
  bottom: -1px;
  left: 1em;
}
#CINECYBER #menuwrapper ul li a.coming-soon:hover::before, #CINECYBER #menuwrapper ul li a.coming-soon:focus::before {
  content: "Bientôt disponible";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: var(--burger_color);
  color: var(--burger_ep_title_color);
  overflow: auto;
  z-index: 2;
  height: auto;
  width: auto;
  padding: 0.5em;
  bottom: auto;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  text-align: center;
  border-radius: 0.5em;
}
#CINECYBER #menuwrapper ul li a,
#CINECYBER #menuwrapper ul li span {
  display: block;
  line-height: 1;
}
#CINECYBER #menuwrapper ul li span.epnb {
  font-family: var(--burger_ep_font_family);
  text-transform: uppercase;
  font-weight: var(--burger_ep_font_weight);
  font-size: 1.12em;
  color: var(--burger_ep_title_color);
  margin: 0 0 0.2em;
}
#CINECYBER #menuwrapper ul li span.titreep {
  font-family: var(--burger_ep_title_font_family);
  font-weight: var(--burger_ep_title_font_weight);
  font-size: 1.2em;
  margin: 0 0 0.1em;
}
#CINECYBER #menuwrapper ul li span.sstitreep {
  font-family: var(--burger_ep_subtitle_font_family);
  font-weight: var(--burger_ep_subtitle_font_weight);
}
@container main_container (min-width: 31.1875em) {
  #CINECYBER #menu-fixe .title.invisible {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap !important;
  }
}
#CINECYBER #menu-fixe .nav #menu-buttons {
  position: sticky;
  top: 0;
  left: 0;
  background-color: var(--primary);
  z-index: 1;
}

header {
  overflow: visible;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 999;
  pointer-events: none;
}
header #header {
  pointer-events: auto;
}
header #menu-burger {
  font-size: 0.5em;
  font-size: calc(0.5em + 0.5 * (100vw - 20em) / 100);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: var(--primary);
  color: var(--primary-contrast);
  width: auto;
  position: relative;
  font-family: var(--burger_font_family);
  font-weight: var(--burger_font_weight);
  z-index: 1;
  padding: 1.75em 2.5em 1.75em 2em;
}
header #menu-burger .nav-buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%;
  font-size: 1.3em;
  margin: 0 0;
  padding: 0;
  max-height: 100vh;
  overflow: auto;
  font-size: 1em;
  overflow: unset;
}
header #menu-burger .nav-buttons #menuwrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 17em;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
  height: calc(100vh - 4em);
  overflow: auto;
}
header #menu-burger .nav-buttons nav {
  width: 100%;
}
header #menu-burger .nav {
  width: 100%;
}
header #menu-burger .nav a#home {
  color: var(--primary-contrast);
  background-color: transparent;
  border: 1px solid transparent;
  display: inline-block;
  text-align: center;
  position: relative;
  font-size: 1em;
  pointer-events: auto;
  margin: 0 0.5em 1em 0;
  padding: 0;
  -webkit-box-flex: 0;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
}
header #menu-burger .nav a#home i {
  font-size: 2.2em;
  display: block;
}
header #menu-burger .nav a#home:hover {
  color: var(--text-black);
}
@container main_container (min-width: 31.25em) {
  header #menu-burger .nav a#home {
    margin: 0 1em;
  }
}
header #menu-burger .nav #menu-buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  padding: 0 0;
}
header #menu-burger .nav #menuToggle {
  position: relative;
  width: 2em;
  height: 2em;
  background-color: transparent;
  margin: 0;
  -webkit-box-flex: 0;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
}
@container main_container (min-width: 31.25em) {
  header #menu-burger .nav #menuToggle {
    margin: 0 0 0 0;
  }
}
header #menu-burger .nav #menuToggle span {
  width: 100%;
  height: 0.3em;
  background-color: var(--burger_color);
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  border-radius: 0.3rem;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
header #menu-burger .nav #menuToggle::before, header #menu-burger .nav #menuToggle::after {
  content: "";
  width: 100%;
  height: 0.3em;
  background-color: var(--burger_color);
  position: absolute;
  display: block;
  border-radius: 0.3rem;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  left: 0;
}
header #menu-burger .nav #menuToggle::before {
  top: 0;
}
header #menu-burger .nav #menuToggle::after {
  bottom: 0;
}
header #menu-burger .nav #menuToggle:hover span, header #menu-burger .nav #menuToggle:hover::before, header #menu-burger .nav #menuToggle:hover::after {
  background-color: var(--burger_bt_hover_color);
}
header #menu-burger .nav #menuToggle.open span {
  opacity: 0;
}
header #menu-burger .nav #menuToggle.open::before {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
          transform: translate(-50%, -50%) rotate(45deg);
}
header #menu-burger .nav #menuToggle.open::after {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
          transform: translate(-50%, -50%) rotate(-45deg);
}

#CINECYBER .accueil {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  position: relative;
}
@container main_container (min-width: 100em) {
  #CINECYBER .accueil {
    background-image: url(../ep1/img/fond_etoiles_accueil.png);
    background-size: 100% auto;
    background-position: top center;
    background-repeat: repeat;
    z-index: 2;
  }
}
#CINECYBER .accueil .production {
  font-family: var(--production_font_family);
  font-weight: var(--production_font_weight);
  font-size: 1.75em;
  font-size: calc(1em + 0.75 * (100cqw - 20rem) / 100);
  margin: 0;
  padding: 0.5em 0 0;
  width: 100%;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
@container main_container (min-width: 100em) {
  #CINECYBER .accueil .production {
    padding: 1em 38% 0;
  }
}
#CINECYBER .accueil .titre, #CINECYBER .accueil #commencer {
  position: relative;
  z-index: 1;
}
#CINECYBER .accueil h2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 13.75em;
  text-transform: uppercase;
  position: relative;
  margin: 32rem 0 0.4em 0;
  line-height: 1.15;
  z-index: 0;
  font-size: calc(5.25em + 8.5 * (100cqw - 20rem) / 100);
  margin-top: calc(22rem + 10 * (100cqw - 20rem) / 100);
}
@container main_container (min-width: 80em) {
  #CINECYBER .accueil h2 {
    margin-bottom: 0.7em;
  }
}
@container main_container (min-width: 100em) {
  #CINECYBER .accueil h2 {
    margin-bottom: 1em;
  }
}
#CINECYBER .accueil h2::before, #CINECYBER .accueil h2::after {
  content: "";
  background-image: url(../ep1/img/luke.png);
  background-size: contain;
  background-position: bottom center;
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  z-index: 0;
  width: 10.5rem;
  width: 23rem;
  width: calc(10.5rem + 12.5 * (100cqw - 20rem) / 100);
  aspect-ratio: 368/607;
  top: -15.5rem;
  top: -32.5625rem;
  top: calc(-15.5rem - 17.0625 * (100cqw - 20rem) / 100);
  left: 1.155rem;
  left: 4.6rem;
  left: calc(1.155rem + 3.445 * (100cqw - 20rem) / 100);
}
#CINECYBER .accueil h2::after {
  background-image: url(../ep1/img/luke_leg.png);
  z-index: 2;
}
#CINECYBER .accueil h2 span {
  display: block;
  position: relative;
  z-index: 1;
}
#CINECYBER .accueil h2 span.net, #CINECYBER .accueil h2 span.wars {
  font-family: var(--accueil_ep_title_font_family);
  font-weight: var(--accueil_ep_title_font_weight);
  color: var(--accueil_ep_title_color);
  -webkit-text-stroke: calc(0.0625rem + 0.1875 * (100cqw - 20rem) / 100) var(--accueil_ep_subtitle_color);
  line-height: 0.8;
  margin: 0 0 0.25625em;
}
#CINECYBER .accueil h2 span.wars {
  font-size: 0.66875em;
  margin: 0;
}
#CINECYBER .accueil h2 span.empire {
  font-family: var(--accueil_ep_subtitle_font_family);
  font-weight: var(--accueil_ep_subtitle_font_weight);
  color: var(--accueil_ep_subtitle_color);
  font-size: 0.20625em;
  position: absolute;
  top: 58%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 100%;
  text-align: left;
  letter-spacing: 0.086em;
}
#CINECYBER .accueil #illus_EP01 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  position: absolute;
  inset: 0;
  pointer-events: none; /* décor uniquement */
  contain: layout paint; /* micro perf */
}
#CINECYBER .accueil #illus_EP01 #leia {
  background-image: url(../ep1/img/leia.png);
  background-size: contain;
  background-position: top left;
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  z-index: 0;
  width: 18rem;
  width: 41rem;
  width: calc(18rem + 23 * (100cqw - 20rem) / 100);
  aspect-ratio: 656/570;
  top: 9.5rem;
  top: 4.5rem;
  top: calc(9.5rem - 5 * (100cqw - 20rem) / 100);
  left: 5.3rem;
  left: 46.9rem;
  left: calc(5.3rem + 41.6 * (100cqw - 20rem) / 100);
}
#CINECYBER .accueil #illus_EP01 #arturito {
  background-image: url(../ep1/img/r2d2.png);
  background-size: contain;
  background-position: top left;
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  z-index: 0;
  width: 3rem;
  width: 7.6875rem;
  width: calc(3rem + 4.6875 * (100cqw - 20rem) / 100);
  aspect-ratio: 123/158;
  top: 18rem;
  top: 20.5rem;
  top: calc(18rem + 4.5 * (100cqw - 20rem) / 100);
  left: 16rem;
  left: 70rem;
  left: calc(16rem + 54 * (100cqw - 20rem) / 100);
}
#CINECYBER .accueil #illus_EP01 #vador {
  background-image: url(../ep1/img/darth.png);
  background-size: contain;
  background-position: top left;
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  z-index: 0;
  width: 71.3125em;
  aspect-ratio: 1127/1007;
  top: -2em;
  left: -12em;
  width: 29.3125em;
  width: calc(29.3125em + 42 * (100cqw - 20rem) / 100);
  top: 3em;
  top: calc(3em + -5 * (100cqw - 20em) / 100);
  left: -13.5em;
  left: calc(-13.5em + 1.5 * (100cqw - 20em) / 100);
}
#CINECYBER .accueil #illus_EP01 #etoile {
  background-image: url(../ep1/img/planete.png);
  background-size: contain;
  background-position: top left;
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  z-index: 0;
  width: 24.625em;
  width: calc(6.625em + 18 * (100cqw - 20rem) / 100);
  aspect-ratio: 394/394;
  top: -2em;
  top: calc(2em - 4 * (100vw - 20em) / 100);
  right: 2.6em;
  right: 8.5em;
  right: calc(2.6em - -5.9 * (100vw - 20em) / 100);
}
#CINECYBER .accueil #illus_EP01 #troopers1 {
  background-image: url(../ep1/img/troopers1.png);
  background-size: contain;
  background-position: top left;
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  z-index: 0;
  width: 8em;
  width: 31.25em;
  width: calc(8em + 23.25 * (100cqw - 20rem) / 100);
  aspect-ratio: 500/341;
  top: 31em;
  top: 34em;
  top: calc(31em + 3 * (100vw - 20em) / 100);
  left: -3em;
  left: 3em;
  left: calc(-3em + 6 * (100vw - 20em) / 100);
}
#CINECYBER .accueil #illus_EP01 #troopers2 {
  background-image: url(../ep1/img/troopers2.png);
  background-size: contain;
  background-position: top left;
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  z-index: 0;
  width: 12.5em;
  width: 42.8125em;
  width: calc(12.5em + 30.3125 * (100cqw - 20rem) / 100);
  aspect-ratio: 685/395;
  top: 31em;
  top: 32em;
  top: calc(31em + 1 * (100cqw - 20em) / 100);
  right: -6.7em;
  right: -18em;
  right: calc(-6.7em + -11.3 * (100cqw - 20rem) / 100);
}
#CINECYBER .accueil #illus_EP01 #vaisseau1 {
  background-image: url(../ep1/img/vaisseau1.png);
  background-size: contain;
  background-position: top left;
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  z-index: 0;
  aspect-ratio: 383/178;
  top: 7.54em;
  top: 19.5em;
  top: calc(7.54em + 11.96 * (100cqw - 20rem) / 100);
  right: 4.4em;
  right: 6em;
  right: calc(4.4em + 1.6 * (100cqw - 20rem) / 100);
  width: 23.9375em;
  width: 4em;
  width: calc(4em + 19.9375 * (100cqw - 20rem) / 100);
}
#CINECYBER .accueil #illus_EP01 #vaisseau2 {
  background-image: url(../ep1/img/vaisseau2.png);
  background-size: contain;
  background-position: top left;
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  z-index: 0;
  aspect-ratio: 239/120;
  width: 2.8em;
  width: 14.9375em;
  width: calc(2.8em + 12.1375 * (100cqw - 20rem) / 100);
  top: 6.8em;
  top: 13em;
  top: calc(6.8em + 6.2 * (100cqw - 20rem) / 100);
  right: 7.9em;
  right: 3.7em;
  right: calc(7.9em + -4.2 * (100cqw - 20rem) / 100);
}
#CINECYBER .accueil #illus_EP01 #vaisseau3 {
  background-image: url(../ep1/img/vaisseau3.png);
  background-size: contain;
  background-position: top left;
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  z-index: 0;
  aspect-ratio: 115/61;
  width: 1em;
  width: 7.1875em;
  width: calc(1em + 6.1875 * (100cqw - 20rem) / 100);
  top: 7.1em;
  top: 16.5em;
  top: calc(7.1em + 9.4 * (100cqw - 20rem) / 100);
  right: 7.05em;
  right: 24em;
  right: calc(7.05em + 16.95 * (100cqw - 20rem) / 100);
}
#CINECYBER .accueil #illus_EP01 #vaisseau4 {
  background-image: url(../ep1/img/vaisseau4.png);
  background-size: contain;
  background-position: top left;
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  z-index: 0;
  width: 1.4em;
  width: 8.3125em;
  width: calc(1.4em + 6.9125 * (100cqw - 20rem) / 100);
  aspect-ratio: 133/67;
  top: 8.9em;
  top: 28.5em;
  top: calc(8.9em + 19.6 * (100cqw - 20rem) / 100);
  right: 4.55em;
  right: 26em;
  right: calc(4.55em + 21.45 * (100cqw - 20rem) / 100);
}
#CINECYBER .accueil #illus_EP01 #vaisseau5 {
  background-image: url(../ep1/img/vaisseau3.png);
  background-size: contain;
  background-position: top left;
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  z-index: 0;
  width: 1.1em;
  width: 7.1875em;
  width: calc(1.1em + 6.0875 * (100cqw - 20rem) / 100);
  aspect-ratio: 115/61;
  top: 7.35em;
  top: 17.5em;
  top: calc(7.35em + 10.15 * (100cqw - 20rem) / 100);
  right: 4.4em;
  right: 2.5em;
  right: calc(4.4em + -1.9 * (100cqw - 20rem) / 100);
}
#CINECYBER .accueil #illus_EP01 .px-layer {
  -webkit-transform: translateY(var(--ty, 0px));
          transform: translateY(var(--ty, 0px));
  -webkit-transform: translate(var(--tx, 0px), var(--ty, 0px)) rotate(var(--rot, 0deg)) scale(var(--sc, 1));
          transform: translate(var(--tx, 0px), var(--ty, 0px)) rotate(var(--rot, 0deg)) scale(var(--sc, 1));
  will-change: transform;
}

#CINECYBER .bd #BDcontainer_CINECYBER img {
  max-width: 1543px;
  display: block;
}
#CINECYBER .bd #BDcontainer_CINECYBER img.desktop {
  display: none;
}
@container main_container (min-width: 48em) {
  #CINECYBER .bd #BDcontainer_CINECYBER img.desktop {
    display: inline;
  }
  #CINECYBER .bd #BDcontainer_CINECYBER img.mobile {
    display: none;
  }
}
#CINECYBER .bd .case {
  text-align: center;
}
@container main_container (min-width: 48em) {
  #CINECYBER .wrapperBD {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 1em 5%;
  }
}
@container main_container (min-width: 100em) {
  #CINECYBER .wrapperBD {
    min-height: 100vh;
    min-height: 100dvh;
    padding: 7em 13% 1em;
    padding-right: calc(15em + 6 * (100cqw - 100em) / 20);
    padding-left: calc(15em + 6 * (100cqw - 100em) / 20);
  }
}
#CINECYBER #bdnav_CINECYBER {
  display: none;
}
@container main_container (min-width: 100em) {
  #CINECYBER #bdnav_CINECYBER {
    font-size: calc(0.83em + 0.17 * (100cqw - 100em) / 20);
    display: block;
    aspect-ratio: 308/937;
    height: 100vh;
    height: 100dvh;
    background-image: url(../img/pellicule.png);
    background-size: auto 100%;
    background-position: bottom left;
    background-repeat: no-repeat;
    position: fixed;
    top: 0;
    right: 0;
    min-height: 48.8cqw;
    width: 19.25em;
    z-index: 2;
  }
}
#CINECYBER #bdnav_CINECYBER div.nav.pages {
  position: absolute;
  top: 0;
  right: 3em;
  z-index: 2;
  width: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-top: 3em;
  min-height: 25em;
  margin: 0;
}
#CINECYBER #bdnav_CINECYBER ul#navpages_CINECYBER {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: 30cqw;
}
#CINECYBER #bdnav_CINECYBER ul#navpages_CINECYBER li {
  margin: 0.5em 0;
  padding: 0;
}
#CINECYBER #bdnav_CINECYBER ul#navpages_CINECYBER li::before {
  content: none;
}
#CINECYBER #bdnav_CINECYBER ul#navpages_CINECYBER li button {
  background: var(--nav_background);
  color: var(--nav_color);
  border: 1px solid var(--nav_color);
  line-height: 1.65;
  margin: 0 0.5em;
  display: block;
  width: 1.65em;
  text-align: center;
  height: 1.65em;
  border-radius: 50%;
  position: relative;
  padding: 0;
}
#CINECYBER #bdnav_CINECYBER ul#navpages_CINECYBER li button::before, #CINECYBER #bdnav_CINECYBER ul#navpages_CINECYBER li button::after {
  content: "";
  position: absolute;
  width: 0.7em;
  height: 2px;
  background: var(--nav_color);
  bottom: 30%;
}
#CINECYBER #bdnav_CINECYBER ul#navpages_CINECYBER li button::before {
  left: 50.5%;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  -webkit-transform-origin: bottom left;
          transform-origin: bottom left;
}
#CINECYBER #bdnav_CINECYBER ul#navpages_CINECYBER li button::after {
  right: 50%;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transform-origin: bottom right;
          transform-origin: bottom right;
}
#CINECYBER #bdnav_CINECYBER ul#navpages_CINECYBER li button.prev {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
#CINECYBER #bdnav_CINECYBER ul#navpages_CINECYBER li button:hover {
  background: var(--nav_hover_background);
  color: var(--nav_hover_color);
}
#CINECYBER #bdnav_CINECYBER ul#navpages_CINECYBER li button:hover::before, #CINECYBER #bdnav_CINECYBER ul#navpages_CINECYBER li button:hover::after {
  background: var(--nav_hover_color);
}
#CINECYBER #bdnav_CINECYBER ul#progression_BD_CINECYBER {
  display: block;
  position: relative;
  top: auto;
  right: auto;
  -webkit-transform: none;
          transform: none;
  font-size: 1.6em;
  margin: 0 0.5em 0 1em;
}
#CINECYBER #bdnav_CINECYBER ul#progression_BD_CINECYBER li {
  margin: 0.5em 0;
  padding: 0;
}
#CINECYBER #bdnav_CINECYBER ul#progression_BD_CINECYBER li::before {
  content: none;
}
#CINECYBER #bdnav_CINECYBER ul#progression_BD_CINECYBER li a {
  background-color: var(--nav_background);
  border: 1px solid var(--nav_color);
  line-height: 0.62;
  padding: 0;
  margin: 1.5em 0;
  display: block;
  width: 0.62em;
  text-align: left;
  height: 0.62em;
  border-radius: 50%;
  overflow: hidden;
  -webkit-transition: none;
  transition: none;
}
#CINECYBER #bdnav_CINECYBER ul#progression_BD_CINECYBER li a.active {
  background-color: var(--nav_color);
}

#CINECYBER .bp #BP_CINECYBER1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0 5%;
  position: relative;
  z-index: 1;
}
@container main_container (min-width: 48em) {
  #CINECYBER .bp #BP_CINECYBER1 {
    min-height: 100vh;
    min-height: 100dvh;
    padding: 7em 13% 3em;
    position: relative;
    /*
    background-image: url(../img/fond_etoiles_bp.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    */
  }
  #CINECYBER .bp #BP_CINECYBER1 * {
    z-index: 1;
  }
  #CINECYBER .bp #BP_CINECYBER1::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../ep1/img/fond_etoiles_bp.png);
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    mix-blend-mode: overlay;
    z-index: 0;
  }
}
#CINECYBER .bp .titre {
  position: relative;
}
#CINECYBER .bp .titre h2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 10em;
  text-transform: uppercase;
  position: relative;
  margin: 32rem 0 0.2em 0;
  line-height: 1.15;
  z-index: 0;
  font-size: calc(5.25em + 4.75 * (100cqw - 20rem) / 100);
  margin-top: calc(10rem - 8 * (100cqw - 20rem) / 100);
}
#CINECYBER .bp .titre h2 span {
  display: block;
  position: relative;
  z-index: 1;
}
#CINECYBER .bp .titre h2 span.net, #CINECYBER .bp .titre h2 span.wars {
  font-family: var(--accueil_ep_title_font_family);
  font-weight: var(--accueil_ep_title_font_weight);
  color: var(--accueil_ep_title_color);
  -webkit-text-stroke: calc(0.0625rem + 0.1875 * (100cqw - 20rem) / 100) var(--accueil_ep_subtitle_color);
  line-height: 0.8;
  margin: 0 0 0.25625em;
}
#CINECYBER .bp .titre h2 span.wars {
  font-size: 0.66875em;
  margin: 0;
}
#CINECYBER .bp .titre h2 span.empire {
  font-family: var(--accueil_ep_subtitle_font_family);
  font-weight: var(--accueil_ep_subtitle_font_weight);
  color: var(--accueil_ep_subtitle_color);
  font-size: 0.20625em;
  position: absolute;
  top: 58%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 100%;
  text-align: left;
  letter-spacing: 0.086em;
}
#CINECYBER .bp p {
  text-align: center;
  font-family: var(--bp_texte_font);
  font-weight: var(--bp_texte_font_weight);
  color: var(--bp_color);
  line-height: 1;
}
#CINECYBER .bp p.first {
  font-family: var(--bp_first_p_font);
  font-weight: var(--bp_first_p_font_weight);
  color: var(--bp_title_color);
  font-size: 1.75em;
  font-size: 3.75em;
  font-size: calc(1.75em + 2 * (100cqw - 20rem) / 100);
}
#CINECYBER .bp p.first .accent {
  font-family: var(--bp_accent_font);
  font-weight: var(--bp_accent_font_weight);
  color: var(--bp_emphase_color);
}
#CINECYBER .bp p.second {
  font-family: var(--bp_second_p_font);
  font-weight: var(--bp_second_p_font_weight);
  font-size: 1.5em;
  font-size: 2.5em;
  font-size: calc(1.5em + 1 * (100cqw - 20rem) / 100);
}
#CINECYBER .bp p.last {
  font-family: var(--bp_third_p_font);
  font-weight: var(--bp_third_p_font_weight);
  font-size: 1.25em;
  font-size: 2em;
  font-size: calc(1.25em + 0.75 * (100cqw - 20rem) / 100);
  line-height: 1.15;
  margin: 0;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
#CINECYBER .bp .illu_bottom {
  position: relative;
  margin: 1em 3em 0 0;
}
#CINECYBER .bp .illu_bottom::before {
  content: "";
  background-image: url(../ep1/img/illu_bottom.png);
  background-size: contain;
  background-position: bottom center;
  background-repeat: no-repeat;
  width: 20rem;
  width: calc(9.35rem + 10.65 * (100cqw - 20rem) / 100);
  max-width: 100%;
  aspect-ratio: 320/453;
  display: block;
  margin: 0 0 0;
}
#CINECYBER .bp .illu_bottom::after {
  content: "";
  background-image: url(../ep1/img/drone.png);
  background-size: contain;
  background-position: bottom center;
  background-repeat: no-repeat;
  width: 6.75rem;
  width: calc(2.9375rem + 3.8125 * (100cqw - 20rem) / 100);
  max-width: 100%;
  aspect-ratio: 108/186;
  display: block;
  margin: 0 0 0;
  position: absolute;
  top: 1em;
  right: -3.5em;
}
@container main_container (min-width: 100em) {
  #CINECYBER .bp .illu_bottom::after {
    top: -6em;
    right: -7.5em;
  }
}
@container main_container (min-width: 100em) {
  #CINECYBER .bp .illu_bottom {
    position: absolute;
    top: 50%;
    left: 4%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    margin: 0;
  }
}
#CINECYBER .bp span.retour {
  display: block;
}
@container main_container (min-width: 48em) {
  #CINECYBER .bp .actions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
@container main_container (min-width: 100em) {
  #CINECYBER .bp .actions {
    margin: 1em 0;
  }
}
#CINECYBER .bp #nextEP button, #CINECYBER .bp #prevEP button {
  margin: 1em 1em 0;
  position: relative;
  min-width: 10em;
  max-width: 100%;
  padding: 0.4em 0.5em;
}
@container main_container (min-width: 100em) {
  #CINECYBER .bp #nextEP button, #CINECYBER .bp #prevEP button {
    margin: 1em;
  }
}
#CINECYBER .bp #nextEP.coming-soon button:hover::before, #CINECYBER .bp #nextEP.coming-soon button:focus::before, #CINECYBER .bp #prevEP.coming-soon button:hover::before, #CINECYBER .bp #prevEP.coming-soon button:focus::before {
  content: "Bientôt disponible";
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  background-color: var(--burger_color);
  color: var(--burger_ep_title_color);
  overflow: auto;
  z-index: 2;
  height: auto;
  width: auto;
  padding: 0.5em;
  bottom: auto;
  -webkit-transform: translate(-50%, -90%);
          transform: translate(-50%, -90%);
  text-align: center;
  border-radius: 0.5em;
}

body.ep02 {
  background-image: url(../ep2/img/fond_mobile.png);
  background-repeat: no-repeat;
}
@media screen and (min-width: 48em) {
  body.ep02 {
    background-image: url(../ep2/img/fond.png);
  }
}
body.ep02 #CINECYBER .bd {
  background-image: url(../ep2/img/bg_strip_mobile.png);
  background-size: 100% auto;
  background-position: top center;
  background-repeat: repeat;
  position: relative;
}
@container main_container (min-width: 100em) {
  body.ep02 #CINECYBER .bd {
    background-image: none;
  }
  body.ep02 #CINECYBER .bd::after {
    content: "";
    width: 100%;
    height: 10cqw;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    background: -webkit-gradient(linear, left bottom, left top, color-stop(10%, rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)));
    background: linear-gradient(0deg, rgb(0, 0, 0) 10%, rgba(0, 0, 0, 0) 100%);
    z-index: 0;
  }
}
body.ep02 #CINECYBER .bd #sliderBD {
  position: relative;
}
@container main_container (min-width: 100em) {
  body.ep02 #CINECYBER .accueil {
    background-image: url(../ep2/img/fond_accueil.png);
    background-repeat: no-repeat;
    min-height: 56.25cqw;
  }
}
body.ep02 #CINECYBER .accueil h2 {
  font-family: var(--accueil_ep2_title_font_family);
  font-weight: var(--accueil_ep2_title_font_weight);
  font-size: calc(3.9375em + 7.9375 * (100cqw - 20rem) / 100);
  margin-top: 19rem;
  margin-top: 32.5rem;
  margin-top: calc(19rem + 13.5 * (100cqw - 20rem) / 100);
  color: var(--accueil_ep2_title_color);
  margin-bottom: 1.2em;
}
body.ep02 #CINECYBER .accueil h2 span {
  line-height: 1;
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(11%, rgb(242, 228, 185)), to(rgb(251, 246, 231)));
  background-image: linear-gradient(0deg, rgb(242, 228, 185) 11%, rgb(251, 246, 231) 100%);
  color: transparent;
  -webkit-background-clip: text;
          background-clip: text;
}
body.ep02 #CINECYBER .accueil h2 span.le {
  font-size: 0.5157em;
  text-transform: lowercase;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-280%, -150%);
          transform: translate(-280%, -150%);
}
body.ep02 #CINECYBER .accueil h2 span.saigneur {
  text-transform: capitalize;
  padding: 0 0.3em 0 0.05em;
}
body.ep02 #CINECYBER .accueil h2 span.saigneur .s {
  font-size: 1.3157em;
  display: inline;
}
body.ep02 #CINECYBER .accueil h2 span.desinfos {
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: translateY(20%);
          transform: translateY(20%);
  width: 100%;
  text-align: right;
}
body.ep02 #CINECYBER .accueil h2 span.des {
  font-size: 0.5473em;
  text-transform: lowercase;
  display: inline-block;
}
body.ep02 #CINECYBER .accueil h2 span.infos {
  text-transform: lowercase;
  font-size: 0.8578em;
  display: inline-block;
  position: relative;
}
body.ep02 #CINECYBER .accueil h2 span.infos::after {
  content: "";
  display: block;
  height: 0.0317em;
  width: 50%;
  position: absolute;
  bottom: -0.09em;
  left: 0;
  background-color: var(--accueil_ep2_title_color);
}
body.ep02 #CINECYBER .accueil h2 span.infos .s {
  text-transform: uppercase;
  display: inline;
}
body.ep02 #CINECYBER .accueil h2::before {
  content: none;
}
body.ep02 #CINECYBER .accueil h2::after {
  content: none;
}
body.ep02 #CINECYBER .accueil #illus_EP02 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  inset: 1;
  pointer-events: none; /* décor uniquement */
  contain: layout paint; /* micro perf */
}
body.ep02 #CINECYBER .accueil #illus_EP02::after {
  content: "";
  width: 100%;
  height: 55%;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  background: #000000;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(50%, rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)));
  background: linear-gradient(0deg, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
  z-index: 1;
}
@container main_container (min-width: 100em) {
  body.ep02 #CINECYBER .accueil #illus_EP02::after {
    content: none;
  }
}
body.ep02 #CINECYBER .accueil #illus_EP02 #persos_sa {
  background-image: url(../ep2/img/persos.png);
  background-size: contain;
  background-position: top left;
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  z-index: 0;
  width: 20rem;
  width: 51.0625rem;
  width: calc(20rem + 31.0625 * (100cqw - 20rem) / 100);
  aspect-ratio: 817/843;
  top: 7.6rem;
  top: 5.5rem;
  top: calc(7.6rem - 2.1 * (100cqw - 20rem) / 100);
  left: 0;
  left: 27.5rem;
  left: calc(0rem + 27.5 * (100cqw - 20rem) / 100);
  z-index: 0;
}
body.ep02 #CINECYBER .accueil #illus_EP02 #nazgeeks_cavaliers {
  background-image: url(../ep2/img/nazgeeks_cavaliers.png);
  background-size: contain;
  background-position: top left;
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  z-index: 0;
  width: 15em;
  width: 47.5em;
  width: calc(15em + 32.5 * (100cqw - 20rem) / 100);
  aspect-ratio: 760/311;
  top: 28em;
  top: 34em;
  top: calc(28em + 6 * (100vw - 20em) / 100);
  left: -7.8em;
  left: -16em;
  left: calc(-7.8em + -8.2 * (100vw - 20em) / 100);
  z-index: 2;
}
body.ep02 #CINECYBER .accueil #illus_EP02 #hommits_cavaliers {
  background-image: url(../ep2/img/hommits_cavaliers.png);
  background-size: contain;
  background-position: top left;
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  z-index: 0;
  width: 8em;
  width: 23.4375em;
  width: calc(8em + 15.4375 * (100cqw - 20rem) / 100);
  aspect-ratio: 439/390;
  top: 27em;
  top: 35em;
  top: calc(27em + 8 * (100cqw - 20em) / 100);
  right: 0.5em;
  right: 6em;
  right: calc(0.5em + 5.5 * (100cqw - 20rem) / 100);
  z-index: 2;
}
body.ep02 #CINECYBER .accueil #illus_EP02 #cavaliers {
  background-image: url(../ep2/img/cavaliers.png);
  background-size: contain;
  background-position: top left;
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  z-index: 0;
  width: 20em;
  width: 65.4375em;
  width: calc(20em + 45.4375 * (100cqw - 20rem) / 100);
  aspect-ratio: 1047/307;
  top: 15em;
  top: 15.5em;
  top: calc(15em + 0.5 * (100vw - 20em) / 100);
  right: -2em;
  right: 4em;
  right: calc(-2em + 6 * (100vw - 20em) / 100);
  z-index: -1;
}
@container main_container (min-width: 48em) {
  body.ep02 #CINECYBER .accueil #illus_EP02 #cavaliers {
    display: none;
  }
}
@container main_container (min-width: 100em) {
  body.ep02 #CINECYBER .accueil #illus_EP02 #cavaliers {
    display: block;
  }
}
body.ep02 #CINECYBER .accueil #illus_EP02 .px-layer {
  -webkit-transform: translateY(var(--ty, 0px));
          transform: translateY(var(--ty, 0px));
  -webkit-transform: translate(var(--tx, 0px), var(--ty, 0px)) rotate(var(--rot, 0deg)) scale(var(--sc, 1));
          transform: translate(var(--tx, 0px), var(--ty, 0px)) rotate(var(--rot, 0deg)) scale(var(--sc, 1));
  will-change: transform;
}
@container main_container (min-width: 80em) {
  body.ep02 #CINECYBER .scroll-bubble {
    position: absolute;
    top: 42rem;
    top: 48rem;
    top: calc(42rem + 6 * (100cqw - 80rem) / 40);
    right: 14rem;
    right: 22rem;
    right: calc(14rem + 8 * (100cqw - 80rem) / 40);
    margin: 0;
    font-size: 1.1em;
    font-size: calc(1em + 0.1 * (100cqw - 80rem) / 40);
  }
}
body.ep02 #CINECYBER .bp {
  position: relative;
  background-image: url(../ep2/img/fond_bp_mobile.png);
  background-position: top center;
  background-size: 768px auto;
  background-repeat: no-repeat;
  background-color: #000000;
}
@container main_container (min-width: 48em) {
  body.ep02 #CINECYBER .bp {
    background-image: url(../ep2/img/fond_bp.png);
    background-size: contain;
  }
}
@container main_container (min-width: 48em) {
  body.ep02 #CINECYBER .bp #BP_CINECYBER1 {
    padding: 7em 16% 3em;
  }
}
@container main_container (min-width: 48em) {
  body.ep02 #CINECYBER .bp #BP_CINECYBER1::after {
    content: none;
  }
}
body.ep02 #CINECYBER .bp::before {
  content: "";
  width: 100%;
  height: 3.5rem;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0)), to(rgb(0, 0, 0)));
  background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%);
  z-index: 0;
}
body.ep02 #CINECYBER .bp::after {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 10rem;
  top: 14rem;
  top: calc(10em + 4 * (100cqw - 20rem) / 28);
  left: 0;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(90%, rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)));
  background: linear-gradient(0deg, rgb(0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%);
  z-index: 0;
}
@container main_container (min-width: 100em) {
  body.ep02 #CINECYBER .bp::after {
    content: none;
  }
}
body.ep02 #CINECYBER .bp .illu_bottom {
  margin: 1em 0em 0 0;
}
@container main_container (min-width: 100em) {
  body.ep02 #CINECYBER .bp .illu_bottom {
    top: 73%;
    left: 3%;
    max-width: 12%;
  }
}
body.ep02 #CINECYBER .bp .illu_bottom::before {
  background-image: url(../ep2/img/illu_bottom.png);
  aspect-ratio: 221/371;
  width: 13.8125rem;
  width: calc(7.125rem + 6.6875 * (100cqw - 20rem) / 100);
}
body.ep02 #CINECYBER .bp .illu_bottom::after {
  content: none;
}
body.ep02 #CINECYBER .bp h2 {
  font-family: var(--accueil_ep2_title_font_family);
  font-weight: var(--accueil_ep2_title_font_weight);
  font-size: calc(3.8em + 6.2 * (100cqw - 20rem) / 100);
  color: var(--accueil_ep2_title_color);
  margin-bottom: 4rem;
  margin-bottom: 8rem;
  margin-bottom: calc(4rem + 4 * (100cqw - 20rem) / 100);
  margin-top: 5rem;
  margin-top: 3rem;
  margin-top: calc(5rem - 2 * (100cqw - 20rem) / 100);
}
body.ep02 #CINECYBER .bp h2 span {
  line-height: 1;
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(11%, rgb(242, 228, 185)), to(rgb(251, 246, 231)));
  background-image: linear-gradient(0deg, rgb(242, 228, 185) 11%, rgb(251, 246, 231) 100%);
  color: transparent;
  -webkit-background-clip: text;
          background-clip: text;
}
body.ep02 #CINECYBER .bp h2 span.le {
  font-size: 0.5157em;
  text-transform: lowercase;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-280%, -150%);
          transform: translate(-280%, -150%);
}
body.ep02 #CINECYBER .bp h2 span.saigneur {
  text-transform: capitalize;
  padding: 0 0.3em 0 0.05em;
}
body.ep02 #CINECYBER .bp h2 span.saigneur .s {
  font-size: 1.3157em;
  display: inline;
}
body.ep02 #CINECYBER .bp h2 span.desinfos {
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: translateY(20%);
          transform: translateY(20%);
  width: 100%;
  text-align: right;
}
body.ep02 #CINECYBER .bp h2 span.des {
  font-size: 0.5473em;
  text-transform: lowercase;
  display: inline-block;
}
body.ep02 #CINECYBER .bp h2 span.infos {
  text-transform: lowercase;
  font-size: 0.8578em;
  display: inline-block;
  position: relative;
}
body.ep02 #CINECYBER .bp h2 span.infos::after {
  content: "";
  display: block;
  height: 0.0317em;
  width: 50%;
  position: absolute;
  bottom: -0.09em;
  left: 0;
  background-color: var(--accueil_ep2_title_color);
}
body.ep02 #CINECYBER .bp h2 span.infos .s {
  text-transform: uppercase;
  display: inline;
}
body.ep02 #CINECYBER .bp h2::before {
  content: none;
}
body.ep02 #CINECYBER .bp h2::after {
  content: none;
}
body.ep02 #CINECYBER .bp p span.retour {
  display: none;
}
@container main_container (min-width: 100em) {
  body.ep02 #CINECYBER .bp p span.retour {
    display: block;
  }
}
body.ep02 #CINECYBER .bp p.first .accent {
  font-family: inherit;
  font-weight: inherit;
}
body.ep02 #CINECYBER .bp p.last {
  margin: 0 0 0.5em;
}
body.ep02 #footer {
  background-color: #000000;
}
@container main_container (min-width: 100em) {
  body.ep02 #footer {
    background-color: transparent;
  }
}

body.ep03 {
  background-image: url(../ep3/img/fond_mobile.png);
  background-repeat: no-repeat;
}
@media screen and (min-width: 48em) {
  body.ep03 {
    background-image: url(../ep3/img/fond.png);
  }
}
@container main_container (min-width: 100em) {
  body.ep03 #CINECYBER header #header {
    background-color: transparent;
  }
}
body.ep03 #CINECYBER #main {
  margin: 0;
}
body.ep03 #CINECYBER .bd {
  background-size: 100% auto;
  background-position: top center;
  background-repeat: repeat;
  position: relative;
}
body.ep03 #CINECYBER .bd::before {
  content: "";
  width: 100%;
  height: 2em;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background: #000000;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)));
  background: linear-gradient(0deg, rgb(0, 0, 0) 0, rgba(0, 0, 0, 0) 100%);
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  z-index: 1;
}
body.ep03 #CINECYBER .bd::after {
  content: "";
  width: 100%;
  height: 10cqw;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(10%, rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)));
  background: linear-gradient(0deg, rgb(0, 0, 0) 10%, rgba(0, 0, 0, 0) 100%);
  z-index: 0;
}
@container main_container (min-width: 100em) {
  body.ep03 #CINECYBER .bd {
    background-image: none;
    /*
    &::after {
        content: "";
        width: 100%;
        height: 10cqw;
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        background: linear-gradient(0deg, rgb(0, 0, 0) 10%, rgba(0, 0, 0, 0) 100%);
        z-index: 0;                        
    }
    */
  }
}
body.ep03 #CINECYBER .bd #sliderBD {
  position: relative;
  z-index: 1;
}
body.ep03 #CINECYBER .accueil {
  background-image: url(../ep3/img/fond_accueil.png);
  background-image: none;
  background-size: 180% auto;
  background-position: 39% 50%;
  background-repeat: no-repeat;
  background-color: #010000;
}
@container main_container (min-width: 100em) {
  body.ep03 #CINECYBER .accueil {
    min-height: 56.25cqw;
    background-size: 100% auto;
    background-position: top center;
  }
}
body.ep03 #CINECYBER .accueil .production {
  margin-top: calc(3rem + 2.8 * (100cqw - 20rem) / 80);
}
@container main_container (min-width: 100em) {
  body.ep03 #CINECYBER .accueil .production {
    margin-top: 0;
  }
}
body.ep03 #CINECYBER .accueil h2 {
  font-family: inherit;
  font-weight: inherit;
  font-size: calc(3.9375em + 6.896 * (100cqw - 20rem) / 100);
  margin-top: 13.5rem;
  margin-top: 30.5rem;
  margin-top: calc(13.5rem + 17 * (100cqw - 20rem) / 100);
  color: var(--accueil_ep3_title_color);
  margin-bottom: 1.2em;
  width: 4.5em;
  margin-right: 0.05em;
}
body.ep03 #CINECYBER .accueil h2 span {
  line-height: 1;
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(11%, rgb(242, 228, 185)), to(rgb(251, 246, 231)));
  background-image: linear-gradient(0deg, rgb(242, 228, 185) 11%, rgb(251, 246, 231) 100%);
  color: transparent;
  -webkit-background-clip: text;
          background-clip: text;
}
body.ep03 #CINECYBER .accueil h2::before {
  content: none;
}
body.ep03 #CINECYBER .accueil h2::after {
  content: none;
}
body.ep03 #CINECYBER .accueil #illus_EP03 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  inset: 1;
  pointer-events: none; /* décor uniquement */
  contain: layout paint; /* micro perf */
}
body.ep03 #CINECYBER .accueil #illus_EP03::after {
  content: "";
  width: 100%;
  height: 15%;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  background: #000000;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(50%, rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)));
  background: linear-gradient(0deg, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
  z-index: 1;
}
@container main_container (min-width: 100em) {
  body.ep03 #CINECYBER .accueil #illus_EP03::after {
    content: none;
  }
}
body.ep03 #CINECYBER .accueil #illus_EP03 #persos_bttf {
  background-image: url(../ep3/img/persos.png);
  background-size: contain;
  background-position: top left;
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  z-index: 0;
  width: 12rem;
  width: 34.5rem;
  width: calc(12rem + 22.5 * (100cqw - 20rem) / 100);
  aspect-ratio: 552/743;
  top: 5.6rem;
  top: 7rem;
  top: calc(5.6rem + 1.4 * (100cqw - 20rem) / 100);
  left: 4em;
  left: 43rem;
  left: calc(4rem + 39 * (100cqw - 20rem) / 100);
  z-index: 7;
}
body.ep03 #CINECYBER .accueil #illus_EP03 #delorean_open {
  background-image: url(../ep3/img/delorean_open.png);
  background-size: contain;
  background-position: top left;
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  z-index: 0;
  width: 8em;
  width: 31.5em;
  width: calc(8em + 23.5 * (100cqw - 20rem) / 100);
  aspect-ratio: 504/383;
  top: 20em;
  top: 18.5em;
  top: calc(20em + -1.5 * (100vw - 20em) / 100);
  left: 1em;
  left: 20em;
  left: calc(1em + 19 * (100vw - 20em) / 100);
  z-index: 6;
}
body.ep03 #CINECYBER .accueil #illus_EP03 #delorean_close {
  background-image: url(../ep3/img/delorean.png);
  background-size: contain;
  background-position: top left;
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  z-index: 0;
  width: 10.375em;
  width: 29.6875em;
  width: calc(10.375em + 19.3125 * (100cqw - 20rem) / 100);
  aspect-ratio: 474/317;
  top: 19em;
  top: 35em;
  top: calc(19em + 16 * (100cqw - 20em) / 100);
  right: 0.7em;
  right: 24.5em;
  right: calc(0.7em + 23.8 * (100cqw - 20rem) / 100);
  z-index: 8;
}
body.ep03 #CINECYBER .accueil #illus_EP03 #fumee1 {
  background-image: url(../ep3/img/fumee1.png);
  background-size: contain;
  background-position: top left;
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  z-index: 0;
  width: 9.25em;
  width: 29.25em;
  width: calc(9.25em + 20 * (100cqw - 20rem) / 100);
  aspect-ratio: 422/382;
  top: 21em;
  top: 38.5em;
  top: calc(21em + 17.5 * (100vw - 20em) / 100);
  right: 3em;
  right: 25em;
  right: calc(3em + 22 * (100vw - 20em) / 100);
  z-index: 5;
}
body.ep03 #CINECYBER .accueil #illus_EP03 #fumee2 {
  background-image: url(../ep3/img/fumee2.png);
  background-size: contain;
  background-position: top left;
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  z-index: 0;
  width: 11em;
  width: 29.25em;
  width: calc(11em + 18.25 * (100cqw - 20rem) / 100);
  aspect-ratio: 468/382;
  top: 17.65em;
  top: 31.5em;
  top: calc(17.65em + 13.85 * (100vw - 20em) / 100);
  right: -3em;
  right: 15.5em;
  right: calc(-3em + 18.5 * (100vw - 20em) / 100);
  z-index: 6;
  mix-blend-mode: lighten;
}
body.ep03 #CINECYBER .accueil #illus_EP03 #etoile1 {
  background-image: url(../ep3/img/etoile_bas.png);
  background-size: contain;
  background-position: top left;
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  z-index: 0;
  width: 16.64em;
  width: 46.5625em;
  width: calc(16.64em + 29.9225 * (100cqw - 20rem) / 100);
  aspect-ratio: 745/704;
  top: 16.5em;
  top: 16.8em;
  top: calc(16.5em + 0.3 * (100vw - 20em) / 100);
  left: 0em;
  left: 19em;
  left: calc(0em + 19 * (100vw - 20em) / 100);
  z-index: 0;
}
body.ep03 #CINECYBER .accueil #illus_EP03 #etoile2 {
  background-image: url(../ep3/img/etoile_bas.png);
  background-size: contain;
  background-position: top left;
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  z-index: 0;
  width: 16.35em;
  width: 46.5625em;
  width: calc(16.35em + 30.2125 * (100cqw - 20rem) / 100);
  aspect-ratio: 745/704;
  top: 9em;
  top: 16.8em;
  top: calc(9em + 7.8 * (100vw - 20em) / 100);
  left: -2em;
  left: 19em;
  left: calc(-2em + 21 * (100vw - 20em) / 100);
  z-index: 1;
}
body.ep03 #CINECYBER .accueil #illus_EP03 #etoile3 {
  background-image: url(../ep3/img/etoile_gauche.png);
  background-size: contain;
  background-position: top left;
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  z-index: 0;
  width: 16em;
  width: 46.5625em;
  width: calc(16em + 30.5625 * (100cqw - 20rem) / 100);
  aspect-ratio: 745/854;
  top: 3em;
  top: 1em;
  top: calc(3em + -2 * (100vw - 20em) / 100);
  left: -2em;
  left: 19em;
  left: calc(-2em + 21 * (100vw - 20em) / 100);
  z-index: 2;
}
body.ep03 #CINECYBER .accueil #illus_EP03 #etoile4 {
  background-image: url(../ep3/img/etoile_droite.png);
  background-size: contain;
  background-position: top left;
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  z-index: 0;
  width: 18em;
  width: 51em;
  width: calc(18em + 33 * (100cqw - 20rem) / 100);
  aspect-ratio: 816/772;
  top: 4em;
  top: 1.5em;
  top: calc(4em + -2.5 * (100vw - 20em) / 100);
  right: -2em;
  right: 26em;
  right: calc(-2em + 28 * (100vw - 20em) / 100);
  z-index: 3;
}
body.ep03 #CINECYBER .accueil #illus_EP03 #blanc {
  background-image: url(../ep3/img/blanc.png);
  background-size: contain;
  background-position: top left;
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  z-index: 0;
  width: 19.125em;
  width: 64.3125em;
  width: calc(19.125em + 45.1875 * (100cqw - 20rem) / 100);
  aspect-ratio: 908/604;
  top: 6em;
  top: 9em;
  top: calc(6em + 3 * (100vw - 20em) / 100);
  left: 0;
  left: 12em;
  left: calc(0em + 12 * (100vw - 20em) / 100);
  z-index: 4;
}
body.ep03 #CINECYBER .accueil #illus_EP03 #noir {
  background-image: url(../ep3/img/noir.png);
  background-size: contain;
  background-position: top left;
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  z-index: 0;
  width: 14em;
  width: 47em;
  width: calc(14em + 33 * (100cqw - 20rem) / 100);
  aspect-ratio: 763/662;
  top: 12em;
  top: 23.5em;
  top: calc(12em + 11.5 * (100vw - 20em) / 100);
  left: 0;
  left: 25em;
  left: calc(0em + 25 * (100vw - 20em) / 100);
  z-index: 9;
}
body.ep03 #CINECYBER .accueil #illus_EP03 .px-layer {
  -webkit-transform: translateY(var(--ty, 0px));
          transform: translateY(var(--ty, 0px));
  -webkit-transform: translate(var(--tx, 0px), var(--ty, 0px)) rotate(var(--rot, 0deg)) scale(var(--sc, 1));
          transform: translate(var(--tx, 0px), var(--ty, 0px)) rotate(var(--rot, 0deg)) scale(var(--sc, 1));
  will-change: transform;
}
@container main_container (min-width: 80em) {
  body.ep03 #CINECYBER .scroll-bubble {
    top: 36rem;
    top: 45rem;
    top: calc(36rem + 9 * (100cqw - 80rem) / 40);
    right: 4.5rem;
    right: 12rem;
    right: calc(4.5rem + 7.5 * (100cqw - 80rem) / 40);
    margin: 0;
    font-size: 1.1em;
    font-size: calc(1em + 0.1 * (100cqw - 80rem) / 40);
  }
}
body.ep03 #CINECYBER .bp {
  position: relative;
  background-image: url(../ep3/img/fond_bp_mobile.png);
  background-position: top center;
  background-size: 768px auto;
  background-repeat: no-repeat;
  background-color: #000000;
}
@container main_container (min-width: 48em) {
  body.ep03 #CINECYBER .bp {
    background-image: url(../ep3/img/fond.png);
    background-size: contain;
  }
}
@container main_container (min-width: 48em) {
  body.ep03 #CINECYBER .bp #BP_CINECYBER1 {
    padding: 7em 14% 3em;
  }
}
@container main_container (min-width: 48em) {
  body.ep03 #CINECYBER .bp #BP_CINECYBER1::after {
    content: none;
  }
}
body.ep03 #CINECYBER .bp::before {
  content: "";
  width: 100%;
  height: 2px;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  background-color: #FFFFFF;
}
body.ep03 #CINECYBER .bp::after {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 10rem;
  top: 25rem;
  top: calc(10em + 15 * (100cqw - 20rem) / 80);
  left: 0;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(80%, rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)));
  background: linear-gradient(0deg, rgb(0, 0, 0) 80%, rgba(0, 0, 0, 0) 100%);
  z-index: 0;
}
@container main_container (min-width: 100em) {}
body.ep03 #CINECYBER .bp .illu_bottom {
  margin: 1em 0em 0 0;
}
@container main_container (min-width: 100em) {
  body.ep03 #CINECYBER .bp .illu_bottom {
    top: 26%;
    left: 5%;
    max-width: 20%;
  }
}
body.ep03 #CINECYBER .bp .illu_bottom::before {
  background-image: url(../ep3/img/illu_bottom.png);
  aspect-ratio: 382/299;
  width: 17rem;
  width: 23.875rem;
  width: calc(17rem + 6.875 * (100cqw - 20rem) / 100);
}
body.ep03 #CINECYBER .bp .illu_bottom::after {
  content: none;
}
body.ep03 #CINECYBER .bp h2 {
  font-family: var(--accueil_ep3_title_font_family);
  font-weight: var(--accueil_ep3_title_font_weight);
  font-size: calc(3.8em + 5.7 * (100cqw - 20rem) / 100);
  color: var(--accueil_ep3_title_color);
  margin-bottom: 2rem;
  margin-top: 3rem;
  width: 4.5em;
  margin-right: 0.05em;
}
body.ep03 #CINECYBER .bp h2 img {
  -webkit-filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.7));
  filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.7));
}
body.ep03 #CINECYBER .bp h2::before {
  content: none;
}
body.ep03 #CINECYBER .bp h2::after {
  content: none;
}
body.ep03 #CINECYBER .bp p span.retour {
  display: none;
}
@container main_container (min-width: 100em) {
  body.ep03 #CINECYBER .bp p span.retour {
    display: block;
  }
}
body.ep03 #CINECYBER .bp p.first .accent {
  font-family: inherit;
  font-weight: inherit;
}
body.ep03 #CINECYBER .bp p.last {
  margin: 0 0 0.5em;
}
body.ep03 #footer {
  background-color: #000000;
}
@container main_container (min-width: 100em) {
  body.ep03 #footer {
    background-color: transparent;
  }
}

body.ep04 {
  background-image: url(../ep4/img/fond_mobile.png);
  background-repeat: no-repeat;
  background-color: var(--deepblue);
  background-size: 100% auto;
}
@media screen and (min-width: 48em) {
  body.ep04 {
    background-image: url(../ep4/img/fond.png);
  }
}
@container main_container (min-width: 100em) {
  body.ep04 #CINECYBER header #header {
    background-color: transparent;
  }
}
body.ep04 #CINECYBER #main {
  margin: 0;
}
body.ep04 #CINECYBER .bd {
  background-size: 100% auto;
  background-position: top center;
  background-repeat: repeat;
  position: relative;
}
body.ep04 #CINECYBER .bd::before {
  content: "";
  width: 100%;
  height: 2em;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background: #000000;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(3, 12, 33)), to(rgba(3, 12, 33, 0)));
  background: linear-gradient(0deg, rgb(3, 12, 33) 0, rgba(3, 12, 33, 0) 100%);
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  z-index: 1;
}
body.ep04 #CINECYBER .bd::after {
  content: "";
  width: 100%;
  height: 75cqw;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  background: -webkit-gradient(linear, left bottom, left top, from(rgb(3, 12, 33)), to(rgba(3, 12, 33, 0)));
  background: linear-gradient(0deg, rgb(3, 12, 33) 0%, rgba(3, 12, 33, 0) 100%);
  z-index: 0;
}
@container main_container (min-width: 100em) {
  body.ep04 #CINECYBER .bd {
    background-image: none;
    /*
    &::after {
        content: "";
        width: 100%;
        height: 10cqw;
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        background: linear-gradient(0deg, rgb(0, 0, 0) 10%, rgba(0, 0, 0, 0) 100%);
        z-index: 0;                        
    }
    */
  }
}
body.ep04 #CINECYBER .bd #sliderBD {
  position: relative;
  z-index: 1;
}
body.ep04 #CINECYBER .accueil {
  background-image: url(../ep4/img/fond_accueil.png);
  background-image: none;
  background-size: cover;
  background-position: top left;
  background-repeat: no-repeat;
  background-color: var(--deepblue);
}
@container main_container (min-width: 100em) {
  body.ep04 #CINECYBER .accueil {
    min-height: 56.25cqw;
    background-size: 100% auto;
    background-position: top center;
  }
}
body.ep04 #CINECYBER .accueil .production {
  margin-top: calc(3rem + 2.8 * (100cqw - 20rem) / 80);
}
@container main_container (min-width: 100em) {
  body.ep04 #CINECYBER .accueil .production {
    margin-top: 0;
  }
}
body.ep04 #CINECYBER .accueil h2 {
  font-family: inherit;
  font-weight: inherit;
  font-size: 14.62em;
  font-size: calc(3.9375em + 10.6825 * (100cqw - 20rem) / 100);
  margin-top: 22rem;
  margin-top: 34rem;
  margin-top: calc(22rem + 12 * (100cqw - 20rem) / 100);
  color: var(--accueil_ep4_title_color);
  margin-bottom: 0.5em;
  width: 4.5em;
}
body.ep04 #CINECYBER .accueil h2::before {
  content: none;
}
body.ep04 #CINECYBER .accueil h2::after {
  content: none;
}
body.ep04 #CINECYBER .accueil #illus_EP04 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  inset: 1;
  pointer-events: none; /* décor uniquement */
  contain: layout paint; /* micro perf */
  background-image: url(../ep4/img/fond_accueil.png);
  background-size: cover;
  background-position: top left;
  background-repeat: no-repeat;
}
body.ep04 #CINECYBER .accueil #illus_EP04::after {
  content: "";
  width: 100%;
  height: 15%;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  background: rgb(3, 12, 33);
  background: -webkit-gradient(linear, left bottom, left top, color-stop(50%, rgb(3, 12, 33)), to(rgba(3, 12, 33, 0)));
  background: linear-gradient(0deg, rgb(3, 12, 33) 50%, rgba(3, 12, 33, 0) 100%);
  z-index: 1;
}
@container main_container (min-width: 100em) {
  body.ep04 #CINECYBER .accueil #illus_EP04::after {
    content: none;
  }
}
body.ep04 #CINECYBER .accueil #illus_EP04 #laura {
  background-image: url(../ep4/img/laura.png);
  background-size: contain;
  background-position: top left;
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  z-index: 0;
  width: 11.375rem;
  width: 34.4375rem;
  width: calc(11.375rem + 23.0625 * (100cqw - 20rem) / 100);
  aspect-ratio: 551/856;
  top: 7.8rem;
  top: -7rem;
  top: calc(7.8rem + -14.8 * (100cqw - 20rem) / 100);
  left: 3.5em;
  left: 40rem;
  left: calc(3.5rem + 36.5 * (100cqw - 20rem) / 100);
  z-index: 2;
}
body.ep04 #CINECYBER .accueil #illus_EP04 #araignee {
  background-image: url(../ep4/img/araignee_mobile.png);
  background-size: contain;
  background-position: top left;
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  z-index: 0;
  width: 12.75rem;
  width: 24rem;
  width: calc(12.75rem + 11.25 * (100cqw - 20rem) / 28);
  aspect-ratio: 674/745;
  top: -1rem;
  right: -1rem;
  z-index: 1;
}
@container main_container (min-width: 20em) {
  body.ep04 #CINECYBER .accueil #illus_EP04 #araignee {
    top: -5rem;
    top: calc(-1rem + -4 * (100cqw - 20rem) / 28);
    right: -2rem;
    right: calc(-1rem + -1 * (100cqw - 20rem) / 28);
  }
}
@container main_container (min-width: 48em) {
  body.ep04 #CINECYBER .accueil #illus_EP04 #araignee {
    background-image: url(../ep4/img/araignee.png);
    aspect-ratio: 835/722;
    width: 20.9375rem;
    width: 52.1875rem;
    width: calc(20.9375rem + 31.25 * (100cqw - 48rem) / 72);
    right: 0;
    top: 0;
  }
}
body.ep04 #CINECYBER .accueil #illus_EP04 #hierond {
  background-image: url(../ep4/img/hieroglyphe.png);
  background-size: contain;
  background-position: top left;
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  z-index: 0;
  width: 22rem;
  width: 70.8125rem;
  width: calc(22rem + 48.8125 * (100cqw - 20rem) / 100);
  aspect-ratio: 1133/1129;
  top: 9rem;
  top: -6rem;
  top: calc(9rem + -15 * (100cqw - 20rem) / 100);
  left: -0.5rem;
  left: 24rem;
  left: calc(-0.5rem + 24.5 * (100cqw - 20rem) / 100);
  z-index: 0;
  mix-blend-mode: soft-light;
}
body.ep04 #CINECYBER .accueil #illus_EP04 .px-layer {
  -webkit-transform: translateY(var(--ty, 0px));
          transform: translateY(var(--ty, 0px));
  -webkit-transform: translate(var(--tx, 0px), var(--ty, 0px)) rotate(var(--rot, 0deg)) scale(var(--sc, 1));
          transform: translate(var(--tx, 0px), var(--ty, 0px)) rotate(var(--rot, 0deg)) scale(var(--sc, 1));
  will-change: transform;
}
@container main_container (min-width: 80em) {
  body.ep04 #CINECYBER .scroll-bubble {
    top: 36rem;
    top: 45rem;
    top: calc(36rem + 9 * (100cqw - 80rem) / 40);
    right: 4.5rem;
    right: 12rem;
    right: calc(4.5rem + 7.5 * (100cqw - 80rem) / 40);
    margin: 0;
    font-size: 1.1em;
    font-size: calc(1em + 0.1 * (100cqw - 80rem) / 40);
  }
}
body.ep04 #CINECYBER .bp {
  position: relative;
  background-image: url(../ep4/img/fond_bp_mobile.png);
  background-position: top left;
  background-size: 768px auto;
  background-repeat: no-repeat;
  background-color: #030c21;
}
@container main_container (min-width: 48em) {
  body.ep04 #CINECYBER .bp {
    background-image: url(../ep4/img/fond.png);
    background-size: 100% auto;
  }
}
@container main_container (min-width: 48em) {
  body.ep04 #CINECYBER .bp #BP_CINECYBER1 {
    padding: 1em 14% 3em;
  }
}
@container main_container (min-width: 48em) {
  body.ep04 #CINECYBER .bp #BP_CINECYBER1::after {
    content: none;
  }
}
body.ep04 #CINECYBER .bp::before {
  content: "";
  width: 100%;
  height: 2px;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  background-color: #FFFFFF;
}
body.ep04 #CINECYBER .bp::after {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 10rem;
  top: 25rem;
  top: calc(10em + 15 * (100cqw - 20rem) / 80);
  left: 0;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(80%, rgb(0, 0, 0)), to(rgba(0, 0, 33, 0)));
  background: linear-gradient(0deg, rgb(0, 0, 0) 80%, rgba(0, 0, 33, 0) 100%);
  z-index: 0;
}
@container main_container (min-width: 100em) {}
body.ep04 #CINECYBER .bp .illu_bottom {
  margin: 1em 0em;
  width: 100%;
}
@container main_container (min-width: 100em) {
  body.ep04 #CINECYBER .bp .illu_bottom {
    top: 64%;
    left: 3%;
    max-width: 48%;
  }
}
body.ep04 #CINECYBER .bp .illu_bottom::before {
  background-image: url(../ep4/img/illu_bottom.png);
  aspect-ratio: 93/41;
  width: 42rem;
  height: 14em;
  max-width: none;
  background-size: 100% auto;
  background-position: bottom left;
}
@container main_container (min-width: 20em) {
  body.ep04 #CINECYBER .bp .illu_bottom::before {
    height: calc(14em + 4 * (100cqw - 20rem) / 28);
    width: 58.125rem;
    width: calc(42em + 16.125 * (100cqw - 20rem) / 100);
  }
}
@container main_container (min-width: 48em) {
  body.ep04 #CINECYBER .bp .illu_bottom::before {
    height: auto;
  }
}
@container main_container (min-width: 100em) {
  body.ep04 #CINECYBER .bp .illu_bottom::before {
    max-width: 100%;
  }
}
body.ep04 #CINECYBER .bp .illu_bottom::after {
  content: none;
}
body.ep04 #CINECYBER .bp h2 {
  font-family: var(--accueil_ep4_title_font_family);
  font-weight: var(--accueil_ep4_title_font_weight);
  font-size: calc(3.8em + 9.3 * (100cqw - 20rem) / 100);
  color: var(--accueil_ep4_title_color);
  margin-bottom: 4rem;
  margin-top: 7rem;
  width: 4.5em;
}
@container main_container (min-width: 48em) {
  body.ep04 #CINECYBER .bp h2 {
    margin-top: 15rem;
    margin-top: calc(7rem + 8 * (100cqw - 48rem) / 72);
  }
}
body.ep04 #CINECYBER .bp h2 img {
  -webkit-filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.7));
  filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.7));
}
body.ep04 #CINECYBER .bp h2::before {
  content: none;
}
body.ep04 #CINECYBER .bp h2::after {
  content: none;
}
body.ep04 #CINECYBER .bp p {
  margin: 0 0 1rem;
}
body.ep04 #CINECYBER .bp p span.retour {
  display: none;
}
@container main_container (min-width: 100em) {
  body.ep04 #CINECYBER .bp p span.retour {
    display: block;
  }
}
body.ep04 #CINECYBER .bp p.first {
  margin: 0 0 2rem;
}
body.ep04 #CINECYBER .bp p.first .accent {
  font-family: inherit;
  font-weight: inherit;
}
body.ep04 #CINECYBER .bp p.last {
  margin: 0 0 0.5em;
}
body.ep04 #CINECYBER #footer {
  background-color: #030c21;
}
@container main_container (min-width: 100em) {
  body.ep04 #CINECYBER #footer {
    background-color: transparent;
  }
}

body.ep05 {
  background-image: url(../ep5/img/fond_mobile.png);
  background-repeat: no-repeat;
  background-color: #000000;
  background-size: 100% auto;
}
@media screen and (min-width: 48em) {
  body.ep05 {
    background-image: url(../ep5/img/fond.png);
  }
}
@container main_container (min-width: 100em) {
  body.ep05 #CINECYBER header #header {
    background-color: transparent;
  }
}
body.ep05 #CINECYBER #main {
  margin: 0;
}
body.ep05 #CINECYBER .bd {
  background-size: 100% auto;
  background-position: top center;
  background-repeat: repeat;
  position: relative;
}
body.ep05 #CINECYBER .bd::before {
  content: "";
  width: 100%;
  height: 2em;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)));
  background: linear-gradient(0deg, rgb(0, 0, 0) 0, rgba(0, 0, 0, 0) 100%);
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  z-index: 1;
}
@container main_container (min-width: 48em) {
  body.ep05 #CINECYBER .bd::before {
    content: none;
  }
}
body.ep05 #CINECYBER .bd::after {
  content: "";
  width: 100%;
  height: 75cqw;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  background: -webkit-gradient(linear, left bottom, left top, from(rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)));
  background: linear-gradient(0deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%);
  z-index: 0;
}
@container main_container (min-width: 100em) {
  body.ep05 #CINECYBER .bd {
    background-image: none;
    /*
    &::after {
        content: "";
        width: 100%;
        height: 10cqw;
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        background: linear-gradient(0deg, rgb(0, 0, 0) 10%, rgba(0, 0, 0, 0) 100%);
        z-index: 0;                        
    }
    */
  }
}
body.ep05 #CINECYBER .bd #sliderBD {
  position: relative;
  z-index: 1;
}
body.ep05 #CINECYBER .accueil {
  background-image: none;
  background-size: cover;
  background-position: top left;
  background-repeat: no-repeat;
}
@container main_container (min-width: 100em) {
  body.ep05 #CINECYBER .accueil {
    min-height: 56.25cqw;
    background-size: 100% auto;
    background-position: top center;
  }
}
body.ep05 #CINECYBER .accueil .production {
  margin-top: calc(3rem + 2.8 * (100cqw - 20rem) / 80);
}
@container main_container (min-width: 100em) {
  body.ep05 #CINECYBER .accueil .production {
    margin-top: 0;
  }
}
body.ep05 #CINECYBER .accueil h2 {
  font-family: inherit;
  font-weight: inherit;
  font-size: 14.62em;
  font-size: calc(4.5em + 10.12 * (100cqw - 20rem) / 100);
  margin-top: 18rem;
  margin-top: 28rem;
  margin-top: calc(18rem + 10 * (100cqw - 20rem) / 100);
  color: var(--accueil_ep5_title_color);
  margin-bottom: 1em;
  width: 4.07em;
}
@container main_container (min-width: 120em) {
  body.ep05 #CINECYBER .accueil h2 {
    font-size: 14.62em;
    margin-top: 28rem;
  }
}
body.ep05 #CINECYBER .accueil h2 #home_subtitle {
  width: 2.5em;
  position: absolute;
  top: 100%;
  left: 3%;
  -webkit-filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.7));
  filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.7));
}
@container main_container (min-width: 48em) {
  body.ep05 #CINECYBER .accueil h2 #home_subtitle {
    width: 2.285em;
    top: 78%;
    left: 56%;
  }
}
body.ep05 #CINECYBER .accueil h2::before {
  content: none;
}
body.ep05 #CINECYBER .accueil h2::after {
  content: none;
}
body.ep05 #CINECYBER .accueil #illus_EP05 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  inset: 1;
  pointer-events: none; /* décor uniquement */
  contain: layout paint; /* micro perf */
  background-image: url(../ep5/img/fond_accueil_mobile.png);
  background-size: 48em auto;
  background-position: top left;
  background-repeat: no-repeat;
  background-color: #000;
}
@container main_container (min-width: 48em) {
  body.ep05 #CINECYBER .accueil #illus_EP05 {
    background-image: url(../ep5/img/fond_accueil.png);
    background-size: cover;
    background-position: top left;
    background-color: transparent;
  }
}
body.ep05 #CINECYBER .accueil #illus_EP05::after {
  width: 100%;
  height: 15%;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  background: rgb(0, 0, 0);
  background: -webkit-gradient(linear, left bottom, left top, color-stop(50%, rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)));
  background: linear-gradient(0deg, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
  z-index: 3;
}
body.ep05 #CINECYBER .accueil #illus_EP05 #persos {
  background-image: url(../ep5/img/persos.png);
  background-size: contain;
  background-position: top left;
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  z-index: 0;
  width: 18rem;
  width: 27rem;
  width: calc(18rem + 9 * (100cqw - 20rem) / 28);
  aspect-ratio: 902/647;
  top: 10.8rem;
  top: 9.5rem;
  top: calc(10.8rem + -1.3 * (100cqw - 20rem) / 28);
  left: 0.5em;
  left: 9.5rem;
  left: calc(0.5rem + 9 * (100cqw - 20rem) / 28);
  z-index: 2;
}
@container main_container (min-width: 48em) {
  body.ep05 #CINECYBER .accueil #illus_EP05 #persos {
    width: 27rem;
    width: 56.375rem;
    width: calc(27rem + 29.375 * (100cqw - 48em) / 72);
    aspect-ratio: 902/647;
    top: 9.5rem;
    top: 4rem;
    top: calc(9.5rem + -5.5 * (100cqw - 48em) / 72);
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
@container main_container (min-width: 120em) {
  body.ep05 #CINECYBER .accueil #illus_EP05 #persos {
    width: 56.375rem;
    top: 4rem;
  }
}
body.ep05 #CINECYBER .accueil #illus_EP05 #nuages_persos {
  background-image: url(../ep5/img/nuages_persos_mobile.png);
  background-size: contain;
  background-position: top left;
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  z-index: 0;
  width: 91rem;
  width: 171rem;
  width: calc(91rem + 80 * (100cqw - 20rem) / 28);
  aspect-ratio: 2312/483;
  top: 15rem;
  top: 13rem;
  top: calc(15rem + -2 * (100cqw - 20rem) / 28);
  left: -5rem;
  left: -3rem;
  left: calc(-5rem + 2 * (100cqw - 20rem) / 28);
  z-index: 4;
  mix-blend-mode: lighten;
}
@container main_container (min-width: 48em) {
  body.ep05 #CINECYBER .accueil #illus_EP05 #nuages_persos {
    background-image: url(../ep5/img/nuages_persos.png);
    aspect-ratio: 1364/573;
    width: 45.25rem;
    width: 85.25rem;
    width: calc(45.25rem + 40 * (100cqw - 48em) / 72);
    top: 17rem;
    top: 24rem;
    top: calc(17rem + 7 * (100cqw - 48em) / 72);
    left: 2rem;
    left: 16rem;
    left: calc(2rem + 14 * (100cqw - 48em) / 72);
  }
}
@container main_container (min-width: 120em) {
  body.ep05 #CINECYBER .accueil #illus_EP05 #nuages_persos {
    width: 85.25rem;
    top: 24rem;
  }
}
body.ep05 #CINECYBER .accueil #illus_EP05 #chef {
  background-image: url(../ep5/img/chef.png);
  background-size: contain;
  background-position: top left;
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  z-index: 0;
  width: 7rem;
  width: 12.5625rem;
  width: calc(7rem + 5.5625 * (100cqw - 20rem) / 28);
  aspect-ratio: 537/557;
  top: 5.5rem;
  top: 5rem;
  top: calc(5.5rem + -0.5 * (100cqw - 20rem) / 28);
  left: 35rem;
  left: 85rem;
  left: calc(11rem + 24 * (100cqw - 20rem) / 28);
  z-index: 0;
}
@container main_container (min-width: 48em) {
  body.ep05 #CINECYBER .accueil #illus_EP05 #chef {
    width: 12.5625rem;
    width: 33.5625rem;
    width: calc(12.5625rem + 21 * (100cqw - 48rem) / 72);
    top: 5rem;
    top: 3rem;
    top: calc(5rem + -2 * (100cqw - 48rem) / 72);
    left: 35rem;
    left: 85rem;
    left: calc(35rem + 50 * (100cqw - 48rem) / 72);
  }
}
@container main_container (min-width: 120em) {
  body.ep05 #CINECYBER .accueil #illus_EP05 #chef {
    width: 33.5625rem;
    top: 3rem;
  }
}
body.ep05 #CINECYBER .accueil #illus_EP05 #nuages_chef {
  background-image: url(../ep5/img/nuages_chef.png);
  background-size: contain;
  background-position: top left;
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  z-index: 0;
  width: 25rem;
  width: 50rem;
  width: calc(25rem + 25 * (100cqw - 20rem) / 28);
  aspect-ratio: 1435/478;
  top: 6.5rem;
  top: 7.5rem;
  top: calc(6.5rem + 1 * (100cqw - 20rem) / 28);
  left: 5.5rem;
  left: 18.5rem;
  left: calc(5.5rem + 13 * (100cqw - 20rem) / 28);
  z-index: 0;
  mix-blend-mode: lighten;
}
@container main_container (min-width: 48em) {
  body.ep05 #CINECYBER .accueil #illus_EP05 #nuages_chef {
    width: 50rem;
    width: 89.6875rem;
    width: calc(50rem + 39.6875 * (100cqw - 48rem) / 72);
    aspect-ratio: 1435/478;
    top: 7.5rem;
    top: 17rem;
    top: calc(7.5rem + 9.5 * (100cqw - 48rem) / 72);
    left: 18.5rem;
    left: 67rem;
    left: calc(18.5rem + 48.5 * (100cqw - 48rem) / 72);
  }
}
@container main_container (min-width: 120em) {
  body.ep05 #CINECYBER .accueil #illus_EP05 #nuages_chef {
    width: 89.6875rem;
    top: 17rem;
  }
}
body.ep05 #CINECYBER .accueil #illus_EP05 #croquemis {
  background-image: url(../ep5/img/croquemis.png);
  background-size: contain;
  background-position: top left;
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  width: 11rem;
  width: 13rem;
  width: calc(11rem + 2 * (100cqw - 20rem) / 28);
  aspect-ratio: 458/338;
  top: 27.5rem;
  top: 36.5rem;
  top: calc(27.5rem + 9 * (100cqw - 20rem) / 28);
  left: -3rem;
  left: 0;
  left: calc(-3rem + 3 * (100cqw - 20rem) / 28);
  z-index: 5;
}
@container main_container (min-width: 48em) {
  body.ep05 #CINECYBER .accueil #illus_EP05 #croquemis {
    width: 14rem;
    width: 28.625rem;
    width: calc(14rem + 14.625 * (100cqw - 48em) / 72);
    aspect-ratio: 458/338;
    top: 29rem;
    top: 20rem;
    top: calc(29rem + -9 * (100cqw - 48em) / 72);
    left: -3em;
    left: 2rem;
    left: calc(-3rem + 5 * (100cqw - 48em) / 72);
  }
}
@container main_container (min-width: 120em) {
  body.ep05 #CINECYBER .accueil #illus_EP05 #croquemis {
    width: 28.625rem;
    top: 20rem;
  }
}
@container main_container (min-width: 48em) {
  body.ep05 #CINECYBER .accueil #illus_EP05 #nuages_coin {
    background-image: url(../ep5/img/nuages_coin.png);
    background-size: contain;
    background-position: top left;
    background-repeat: no-repeat;
    display: block;
    position: absolute;
    z-index: 0;
    width: 36rem;
    width: 89.6875rem;
    width: calc(36rem + 53.6875 * (100cqw - 48rem) / 72);
    aspect-ratio: 1435/478;
    top: 30rem;
    top: 41rem;
    top: calc(30rem + 11 * (100cqw - 48rem) / 72);
    left: -11.5rem;
    left: -56.5em;
    left: calc(-11.5rem + -45 * (100cqw - 48rem) / 72);
    z-index: 0;
    mix-blend-mode: lighten;
  }
}
@container main_container (min-width: 120em) {
  body.ep05 #CINECYBER .accueil #illus_EP05 #nuages_coin {
    width: 89.6875rem;
    top: 41rem;
  }
}
body.ep05 #CINECYBER .accueil #illus_EP05 #degrade {
  background-image: url(../ep5/img/degrade.png);
  background-size: 100% auto;
  background-position: bottom left;
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  z-index: 0;
  width: 100%;
  aspect-ratio: 1919/497;
  bottom: 7cqw;
  left: 0;
  z-index: 0;
}
@container main_container (min-width: 48em) {
  body.ep05 #CINECYBER .accueil #illus_EP05 #degrade {
    bottom: 7cqw;
  }
}
body.ep05 #CINECYBER .accueil #illus_EP05 .px-layer {
  -webkit-transform: translateY(var(--ty, 0px));
          transform: translateY(var(--ty, 0px));
  -webkit-transform: translate(var(--tx, 0px), var(--ty, 0px)) rotate(var(--rot, 0deg)) scale(var(--sc, 1));
          transform: translate(var(--tx, 0px), var(--ty, 0px)) rotate(var(--rot, 0deg)) scale(var(--sc, 1));
  will-change: transform;
}
@container main_container (min-width: 80em) {
  body.ep05 #CINECYBER .scroll-bubble {
    top: 36rem;
    top: 45rem;
    top: calc(36rem + 9 * (100cqw - 80rem) / 40);
    right: 4.5rem;
    right: 12rem;
    right: calc(4.5rem + 7.5 * (100cqw - 80rem) / 40);
    margin: 0;
    font-size: 1.1em;
    font-size: calc(1em + 0.1 * (100cqw - 80rem) / 40);
  }
}
body.ep05 #CINECYBER .bp {
  position: relative;
  background-image: url(../ep5/img/fond_bp_mobile.png);
  background-position: top left;
  background-size: 768px auto;
  background-repeat: no-repeat;
  background-color: #000000;
}
@container main_container (min-width: 48em) {
  body.ep05 #CINECYBER .bp {
    background-image: url(../ep5/img/fond.png);
    background-size: 100% auto;
  }
}
@container main_container (min-width: 48em) {
  body.ep05 #CINECYBER .bp #BP_CINECYBER1 {
    padding: 1em 14% 3em;
  }
}
@container main_container (min-width: 48em) {
  body.ep05 #CINECYBER .bp #BP_CINECYBER1::after {
    content: none;
  }
}
body.ep05 #CINECYBER .bp::before {
  content: "";
  width: 100%;
  height: 2px;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  background-color: #FFFFFF;
}
body.ep05 #CINECYBER .bp::after {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 10rem;
  top: 25rem;
  top: calc(10em + 15 * (100cqw - 20rem) / 80);
  left: 0;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(80%, rgb(0, 0, 0)), to(rgba(0, 0, 33, 0)));
  background: linear-gradient(0deg, rgb(0, 0, 0) 80%, rgba(0, 0, 33, 0) 100%);
  z-index: 0;
}
@container main_container (min-width: 100em) {}
body.ep05 #CINECYBER .bp .illu_bottom {
  margin: 1em 0em;
}
@container main_container (min-width: 100em) {
  body.ep05 #CINECYBER .bp .illu_bottom {
    top: 36%;
    left: 4%;
    max-width: 22%;
  }
}
body.ep05 #CINECYBER .bp .illu_bottom::before {
  background-image: url(../ep5/img/illu_bottom.png);
  aspect-ratio: 348/338;
  width: 11rem;
}
@container main_container (min-width: 20em) {
  body.ep05 #CINECYBER .bp .illu_bottom::before {
    width: 11rem;
    width: 21.75rem;
    width: calc(11rem + 10.75 * (100cqw - 20rem) / 80);
  }
}
body.ep05 #CINECYBER .bp .illu_bottom::after {
  content: none;
}
body.ep05 #CINECYBER .bp h2 {
  font-family: var(--accueil_ep5_title_font_family);
  font-weight: var(--accueil_ep5_title_font_weight);
  font-size: calc(3.8em + 6.26 * (100cqw - 20rem) / 100);
  color: var(--accueil_ep5_title_color);
  margin-bottom: 1em;
  margin-top: 3rem;
  width: 4.5em;
}
body.ep05 #CINECYBER .bp h2 #home_subtitle {
  width: 2.5em;
  position: absolute;
  top: 100%;
  left: 3%;
}
@container main_container (min-width: 48em) {
  body.ep05 #CINECYBER .bp h2 #home_subtitle {
    width: 2.285em;
    top: 78%;
    left: 56%;
  }
}
@container main_container (min-width: 48em) {
  body.ep05 #CINECYBER .bp h2 {
    margin-top: 5rem;
    margin-bottom: 0.5em;
  }
}
@container main_container (min-width: 120em) {
  body.ep05 #CINECYBER .bp h2 {
    font-size: 10.06em;
  }
}
body.ep05 #CINECYBER .bp h2 img {
  -webkit-filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.7));
  filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.7));
}
body.ep05 #CINECYBER .bp h2::before {
  content: none;
}
body.ep05 #CINECYBER .bp h2::after {
  content: none;
}
body.ep05 #CINECYBER .bp p {
  margin: 0 0 1rem;
}
body.ep05 #CINECYBER .bp p span.retour {
  display: none;
}
@container main_container (min-width: 100em) {
  body.ep05 #CINECYBER .bp p span.retour {
    display: block;
  }
}
body.ep05 #CINECYBER .bp p.first {
  margin: 0 0 2rem;
}
body.ep05 #CINECYBER .bp p.first .accent {
  font-family: inherit;
  font-weight: inherit;
}
body.ep05 #CINECYBER .bp p.last {
  margin: 0 0 0.5em;
}
body.ep05 #CINECYBER #footer {
  background-color: #000000;
}
@container main_container (min-width: 100em) {
  body.ep05 #CINECYBER #footer {
    background-color: transparent;
  }
}