/*
  1111111        888888888
 1::::::1      88:::::::::88
1:::::::1    88:::::::::::::88
111:::::1   8::::::88888::::::8
   1::::1   8:::::8     8:::::8  aaaaaaaaaaaaa   nnnn  nnnnnnnn        ssssssssss
   1::::1   8:::::8     8:::::8  a::::::::::::a  n:::nn::::::::nn    ss::::::::::s
   1::::1    8:::::88888:::::8   aaaaaaaaa:::::a n::::::::::::::nn ss:::::::::::::s
   1::::l     8:::::::::::::8             a::::a nn:::::::::::::::ns::::::ssss:::::s
   1::::l    8:::::88888:::::8     aaaaaaa:::::a   n:::::nnnn:::::n s:::::s  ssssss
   1::::l   8:::::8     8:::::8  aa::::::::::::a   n::::n    n::::n   s::::::s
   1::::l   8:::::8     8:::::8 a::::aaaa::::::a   n::::n    n::::n      s::::::s
   1::::l   8:::::8     8:::::8a::::a    a:::::a   n::::n    n::::nssssss   s:::::s
111::::::1118::::::88888::::::8a::::a    a:::::a   n::::n    n::::ns:::::ssss::::::s
1::::::::::1 88:::::::::::::88 a:::::aaaa::::::a   n::::n    n::::ns::::::::::::::s
1::::::::::1   88:::::::::88    a::::::::::aa:::a  n::::n    n::::n s:::::::::::ss
111111111111     888888888       aaaaaaaaaa  aaaa  nnnnnn    nnnnnn  sssssssssss
 */
*,
*::before,
*::after { box-sizing: border-box; outline:none;}
html {
  position:relative;
  height:100%;
  width:100%;
  overflow-x: hidden;
}
body {
  overflow-x: hidden;
  position:relative;
  height:100%;
  width:100%;
  font-family: "Muli", sans-serif;
  background:#0E2665;
  color:#fff;
  -webkit-user-select: none;
  user-select: none;
}
#wrapper {
  position:relative;
  height:100%;
  width:100%;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
}
#mainBg {
  position:absolute;
  width:100%;
  padding-top: 56.25%;
  top:50%;
  left:50%;
  -webkit-transform:translate(-50%, -50%);
  transform:translate(-50%, -50%);
  overflow:hidden;
}
#mainBg > div {
  position:absolute;
  width:130%;
  padding-top: 56.25%;
  top:50%;
  left:50%;
  -webkit-transform:translate(-50%, -50%);
  transform:translate(-50%, -50%);
  background-color:#0E2665;
  background-position:center center;
  background-repeat:no-repeat;
  background-size:cover;
  animation: bgMain 30s linear infinite alternate;
}
@keyframes bgMain {
  0% {
    width: 130%;
  }
  100% {
    width: 100%;
  }
}
::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}
::selection {
  background: #b3d4fc;
  text-shadow: none;
}
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}
h1,h2,p {
  margin:0;
}
audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}
textarea {
  resize: vertical;
}
.hidden,
[hidden] {
  display: none !important;
}
.nq-c-srOnly {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
.nq-c-srOnly.focusable:active,
.nq-c-srOnly.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}
.nq-c-clearfix::before,
.nq-c-clearfix::after {
  content: " ";
  display: table;
}
.nq-c-clearfix::after {
  clear: both;
}

.loader {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  overflow:hidden;
  z-index:20;
  display:block;
  opacity:1;
  user-select: none;
  background:rgba(14, 38, 101,1);
  transition:background 1s ease-in-out 0s;
}
#loader-logo {
  position:absolute;
  width:100%;
  padding-top:56.25%;
  top:50%;
  left:50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
@media screen and (max-width:1024px) {
  #loader-logo {
    width:800px;
    height:450px;
    padding-top:0;
  }
}
#loader-logo svg {
  position:absolute;
  top:0;
  left:0;
}

.nq-c-screen {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  overflow:hidden;
  z-index:10;
  display:none;
  opacity:0;
  user-select: none;
  touch-action: none;
}
.loader *,
.nq-c-screen * {
  cursor:none !important;
}

#logoData {
  margin-bottom: -12px;
}
@media screen and (max-width:1023px) {
  #logoData {
    width:340px;
    height:116px;
    margin-bottom: -6px;
  }
}
@media screen and (max-width:467px) {
  #logoData {
    width:280px;
    height:103px;
    margin-bottom: -5px;
  }
}
/* Smoke Title */
#smokeTitle1,
#smokeTitle2,
#smokeTitle3 {
  font-size:0;
  line-height:1;
}
#smokeTitleText1,
#smokeTitleText2,
#smokeTitleText3 {
  position:relative;
  font-size:0;
  display:inline-block;
  letter-spacing: 0;
}
#smokeTitleText1 > span,
#smokeTitleText2 > span,
#smokeTitleText3 > span{
  font-size:42px;
  letter-spacing: 7px;
  opacity:1;
  position:relative;
  z-index:2;
}
#smokeTitleText1 > span {
  letter-spacing: 6px;
}
@media screen and (max-width:1023px) {
  #smokeTitleText1 > span,
  #smokeTitleText2 > span{
    font-size:32px;
  }
  #smokeTitleText2 > span.br {
    display:block;
    font-size:10px;
  }
  #smokeTitleText1 > span.br {
    display:block;
    font-size:10px;
  }
  #smokeTitleText3 > span.br {
    display:block;
    font-size:10px;
  }
}
@media screen and (max-width:767px) {
  #smokeTitleText1 > span,
  #smokeTitleText2 > span,
  #smokeTitleText3 > span{
    font-size:28px;
  }
}
@media screen and (max-width:480px) {
  #smokeTitleText1 > span{
    font-size:24px;
    letter-spacing: 2px;
  }
  #smokeTitleText2 > span{
    font-size:24px;
    letter-spacing: 2px;
  }
  #smokeTitleText3 > span{
    font-size:24px;
    letter-spacing: 4px;
  }
}

#smokeTitleVideoWrapper1,
#smokeTitleVideoWrapper2,
#smokeTitleVideoWrapper3 {
  opacity:0.5;
  display:block;
  height:100%;
  position:relative;
}
#smokeTitleVideoWrapper1 video,
#smokeTitleVideoWrapper2 video,
#smokeTitleVideoWrapper3 video {

  position:absolute;
  width:140%;
  height:auto;
  z-index:1;
  left:50%;
  bottom:-65px;
  -webkit-transform:translate(-50%, 0);
  transform:translate(-50%, 0);
}
#smokeTitleVideoWrapper2 video {
  bottom:-60px;
}

@media screen and (max-width:1023px) {
  #smokeTitleVideoWrapper1 video {
    bottom:-20px;
  }
  #smokeTitleVideoWrapper2 video {
    bottom:-32px;
  }
  #smokeTitleVideoWrapper3 video {
    bottom:-32px;
  }
}
@media screen and (max-width:767px) {
  #smokeTitleVideoWrapper2 video {
    bottom:-25px;
  }
  #smokeTitleVideoWrapper3 video {
    bottom:-25px;
  }
}
@media screen and (max-width:479px) {
  #smokeTitleVideoWrapper1 video {
    bottom:-15px;
  }
  #smokeTitleVideoWrapper2 video {
    bottom:-20px;
  }
  #smokeTitleVideoWrapper3 video {
    bottom:-20px;
  }
}

#smokeTitleVideoWrapper1:before,
#smokeTitleVideoWrapper2:before,
#smokeTitleVideoWrapper3:before{
  content:" ";
  display:block;
  position:absolute;
  top:50%;
  left:50%;
  width:100vw;
  height:150vh;
  -webkit-transform:translate(-50%, -50%);
  transform:translate(-50%, -50%);
}
#InteractiveMap {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:-1;
  opacity:1;
}


.nq-c-pays path {
  opacity:0;
  transition: opacity 0.8s ease-in;
}
.nq-c-pays:hover path {
    opacity:0.5;
}
.nq-c-pays[data-active="true"] path,
.nq-c-pays[data-active="true"]:hover path {
  opacity:0.5;
}
.nq-c-pays-dash {
  opacity:1;
  transition: opacity 0.8s ease-in;
}
.nq-c-pays[data-active="true"] + .nq-c-pays-dash {
  opacity:0;
}
.nq-c-pays circle,
.nq-c-pays ellipse {
  opacity:0;
  transition: opacity 0.5s ease-in;
  filter: drop-shadow(0px 0px 5px #ffffff);
  animation: shine 3s 0.5s linear infinite alternate;
  stroke: #EA6A30;
  stroke-width: 1;
}
@keyframes shine {
  0% {
    filter: drop-shadow(0px 0px 5px #ffffff);
  }

  100% {
    filter: drop-shadow(0px 0px 1px #ffffff);
  }
}
.nq-c-pays[data-active="true"] circle,
.nq-c-pays[data-active="true"] ellipse {
  opacity:1;
}

#soundAnim {
  position:absolute;
  top:20px;
  right:40px;
  z-index:200;
  width: 105px;
  height:70px;
}
@media screen and (max-width:1023px) {
  #soundAnim {
    width: 75px;
    height:50px;
    right:20px;
  }
}

.nq-c-screenActionText {
  position:absolute;
  bottom: 6%;
  left:50%;
  white-space: nowrap;
  -webkit-transform:translate(-50%, 0);
  transform:translate(-50%, 0);
  color:#ffffff;
  text-transform:uppercase;
  font-size:15px;
  font-weight:normal;
  z-index:7;
  letter-spacing:4px;
  opacity:0;
  pointer-events: none;
  filter: blur(0.5rem)
}
.nq-c-screenActionText[data-show="true"] {
  filter:none;
  opacity:1;
}
@media screen and (max-width:1023px) {
  .nq-c-screenActionText {
    font-size:14px;
  }
}
@media screen and (max-width:767px) {
  .nq-c-screenActionText {
    font-size:12px;
    bottom: 4%;
  }
}
#InteractiveMapSvg {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
#InteractiveMapSvgWorldMob {
  position:absolute;
  top: -254px;
  left: 50%;
  width: 1500px;
  height:auto;
  display:none;
  -webkit-transform: translate(-32%, 0);
  transform: translate(-32%, 0);

}
#mapMobileAustralie {
  position:fixed;
  bottom:calc(7% + 30px);
  right:-30px;
  width:270px;
  display:none;
  background:rgba(14, 38, 101,0.5);
  border:1px #ffffff solid;
}

@media screen and (max-width:1023px) {
  #InteractiveMapSvg {
    display:none;
  }
  #InteractiveMapSvgWorldMob {
    display:block;
  }
  #mapMobileAustralie {
    display:block;
  }
}
@media screen and (max-width:767px) {
  #InteractiveMapSvgWorldMob {
    width: 1280px;
    -webkit-transform: translate(-31%, 0);
    transform: translate(-31%, 0);
  }
  #mapMobileAustralie {
    width:230px;
    right:-25px;
  }
}
@media screen and (max-width:599px) {
  #InteractiveMapSvgWorldMob {
    top: -178px;
    width: 1020px;
    -webkit-transform: translate(-31%, 0);
    transform: translate(-31%, 0);
  }
  #mapMobileAustralie {
    width:200px;
    right:-25px;
  }
}
@media screen and (max-width:599px) and (min-height:500px) {
  #InteractiveMapSvgWorldMob {
    top: 0;
  }
  #mapMobileAustralie {
    bottom:calc(7% + 40px);
  }
}

@media screen and (max-width:479px) {
  #InteractiveMapSvgWorldMob {
    top: -118px;
    width: 766px;
    -webkit-transform: translate(-30%, 0);
    transform: translate(-30%, 0);
  }
  #mapMobileAustralie {
    width:170px;
    right:-25px;
  }
}
@media screen and (max-width:479px) and (min-height:500px) {
  #InteractiveMapSvgWorldMob {
    top: 0;
  }
  #mapMobileAustralie {
    bottom:calc(7% + 40px);
  }
}

@media screen and (orientation: landscape) and (max-width:1023px) {
  #InteractiveMapSvg {
    display:block;
  }
  #mapMobileAustralie {
    display:none;
  }
  #InteractiveMapSvgWorldMob {
    display:none;
  }
}


#InteractiveMapMask {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:1;
  pointer-events: none;
}
#InteractiveMapMaskBG {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  overflow:hidden;
}
#InteractiveMapBG {
  position:absolute;
  top:0;
  width:100vw;
  right:0;
  bottom:0;
  overflow:hidden;
}
#InteractiveMapBGDiv {
  position:absolute;
  top:50%;
  left:50%;
  -webkit-transform:translate(-50%, -50%);
  transform:translate(-50%, -50%);
  width:100%;
  padding-top: 56.25%;
}
#InteractiveMapBGDiv > div {
  position:absolute;
  width:130%;
  padding-top: 56.25%;
  top:50%;
  left:50%;
  -webkit-transform:translate(-50%, -50%);
  transform:translate(-50%, -50%);
  background-color:#0E2665;
  background-position:center center;
  background-repeat:no-repeat;
  background-size:cover;
  animation: bgMain 30s linear infinite alternate;
}

#InteractiveMapMask:before {
  content:"";
  display:block;
  position:absolute;
  top:0;
  bottom:0;
  right:100%;
  width:800px;
  background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(12, 32, 80, 1) 100%);
  z-index:1;
}
#InteractiveMapMask:after {
  content:"";
  display:block;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  width:400px;
  background: linear-gradient(-90deg, rgba(0,0,0,0) 0%, rgba(12, 32, 80, 1) 100%);
  opacity:0;
  transition:opacity 0.7s ease-in-out 0s;
}
#InteractiveMapMask[data-active]:after {
  opacity:1;
}
@media screen and (max-width:599px) {
  #InteractiveMapMask:before {
    width:400px;
  }
  #InteractiveMapMask:after {
    width:200px;
  }
}

.nq-c-screen[data-name="map"] {
  display:block;
  opacity:1;
}

#teamsLine-action {
  text-shadow: 0px 0px 2px #0E2665;
}

#screen2TitleClickHold-action,
#screen5TitleContact-action,
#screen5TitleData-action {
  position:absolute;
  left:50%;
  top:100%;
  font-size: 18px;
  -webkit-transform:translate(-50%, 30px);
  transform:translate(-50%, 30px);
  text-transform:uppercase;
  font-weight:normal;
  letter-spacing: 5px;
  opacity:0;
  width:100%;
}
#screen5TitleData-action {
  -webkit-transform:translate(-50%, 80px);
  transform:translate(-50%, 80px);
}

#screen5TitleContact-action,
#screen5TitleContact-action:hover,
#screen5TitleContact-action:active,
#screen5TitleData-action,
#screen5TitleData-action:hover,
#screen5TitleData-action:active{
  pointer-events: auto;
  width:auto;
  color:#fff;
  text-decoration:none;
  white-space: nowrap;
}
@media screen and (max-width:1023px) {
  #screen2TitleClickHold-action,
  #screen5TitleContact-action,
  #screen5TitleData-action {
    font-size: 16px;
  }
}
@media screen and (max-width:767px) {
  #screen2TitleClickHold-action,
  #screen5TitleContact-action,
  #screen5TitleData-action{
    font-size: 12px;
  }
}
#videoLogosWrapper {
  height:100%;
  width:100%;
  position:absolute;
  top:0;
  left:0;
}
#videoLogosWrapper svg {
  position:absolute;
  top:50%;left:50%;
  width:100%;
  height:100%;
  opacity:1;
  max-height:85%;
  -webkit-transform:translate(-50%, -50%);
  transform:translate(-50%, -50%);
}
#videoLogosWrapper svg image {
  height:0;
  opacity:0;
  margin-left:-150px;
}
#videoLogosWrapperVideo {
  position:absolute;
  width:100vw;
  top:50%;
  left:50%;
  -webkit-transform:translate(-50%, -50%);
  transform:translate(-50%, -50%);
  padding-top:56.25%;
}
#videoLogosWrapperVideo video {
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  opacity:0;
}
/* Element screen 3 */
#teamsLineWrapper {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
}
#teamsLineSvg {
  width:100%;
  position:absolute;
  top:50%;
  left:0;
  -webkit-transform:translate(0,-47%);
  transform:translate(0,-47%);
}
#teamsLineSvg g path {
  opacity:0.5;
  fill:none;
  stroke:#FFFFFF;
  stroke-width:1.1;
  stroke-miterlimit:10;
  stroke-dasharray: 2850;
  stroke-dashoffset: 2850;
}
#teamsLineSvg g#JC path {
  stroke-dasharray: 2985;
  stroke-dashoffset: 2985;
}
#teamsLineSvg g#Alex path {
  stroke-dasharray: 2945;
  stroke-dashoffset: 2945;
}
#teamsLineSvg g#Erwan path {
  stroke-dasharray: 2970;
  stroke-dashoffset: 2970;
}
#teamsLineSvg g#Anne path {
  stroke-dasharray: 2880;
  stroke-dashoffset: 2880;
}
#teamsLineSvg g#Mad path {
  stroke-dasharray: 2880;
  stroke-dashoffset: 2880;
}
#teamsLineSvg g#Francois path {
  stroke-dasharray: 3050;
  stroke-dashoffset: 3050;
}
#teamsLineSvg g#Elo path {
  stroke-dasharray: 2860;
  stroke-dashoffset: 2860;
}
#teamsLineSvg g[data-active] path {animation: draw 2s cubic-bezier(.45,0,.63,1) forwards;}
#teamsLineSvg g#JC[data-active] path {animation: drawJC 2s cubic-bezier(.45,0,.63,1) forwards;}
#teamsLineSvg g#Alex[data-active] path {animation: drawAlex 2s cubic-bezier(.45,0,.63,1) forwards;}
#teamsLineSvg g#Erwan[data-active] path {animation: drawErwan 2s cubic-bezier(.45,0,.63,1) forwards;}
#teamsLineSvg g#Anne[data-active] path {animation: drawAnne 2s cubic-bezier(.45,0,.63,1) forwards;}
#teamsLineSvg g#Mad[data-active] path {animation: drawMad 2s cubic-bezier(.45,0,.63,1) forwards;}
#teamsLineSvg g#Francois[data-active] path {animation: drawFrancois 2s cubic-bezier(.45,0,.63,1) forwards;}
#teamsLineSvg g#Elo[data-active] path {animation: drawElo 2s cubic-bezier(.45,0,.63,1) forwards;}

@keyframes draw { to {stroke-dashoffset: 5700;} }
@keyframes drawJC { to {stroke-dashoffset: 5970;} }
@keyframes drawAlex { to {stroke-dashoffset: 5890;} }
@keyframes drawErwan { to {stroke-dashoffset: 5940;} }
@keyframes drawAnne { to {stroke-dashoffset: 5760;} }
@keyframes drawMad { to {stroke-dashoffset: 5760;} }
@keyframes drawFrancois { to {stroke-dashoffset: 6100;} }
@keyframes drawElo { to {stroke-dashoffset: 5720;} }

#teamsLineSvgMob {
  height: 110%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display:none;
}
#teamsLineSvgMob g path {
  opacity:0.5;
  fill:none;
  stroke:#FFFFFF;
  stroke-width:1.0087;
  stroke-miterlimit:10;
  stroke-dasharray: 4480;
  stroke-dashoffset: 4480;
}
#teamsLineSvgMob g[data-active] path {animation: drawMob 2s cubic-bezier(.45,0,.63,1) forwards;}

@keyframes drawMob { to {stroke-dashoffset: 0;} }

@media (orientation: portrait) {
  #teamsLineSvgMob {
    display:block;
  }
  #teamsLineSvg {
    display:none;
  }
}
#teamsLineImage,
#teamsLineImageMob {
  opacity:0;
}
/* Element screen 4 */
#title1galaxy {
  z-index:1;
}
#galaxyVideoWrapper {
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  opacity:0;
}
#galaxyVideoWrapperVideo {
  position:absolute;
  top:50%;
  left:50%;
  -webkit-transform:translate(-50%, -50%);
  transform:translate(-50%, -50%);
  width:100%;
  padding-top:56.25%;
}
#galaxyVideoWrapperVideo:before {
  display:block;
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background: url('../imgs/galaxie.jpg') center center no-repeat;
  background-size:cover;
  transition:opacity 1s ease-in-out 0s;
  opacity:0;
}
#galaxyVideoWrapperVideo[data-showbg]:before {
  opacity:1;
}
#galaxyVideoWrapperVideo video {
  position:absolute;
  top:0;left:0;
  width:100%;
  height:100%;
}
#galaxyVideo {

}
#cursorFusee {
  width:80px;
  height:80px;
  position:absolute;
  top:50%;
  left:50%;
  margin-left: -40px;
  margin-top: -40px;
}
#cursorWind {
  width:64px;
  height:64px;
  position:absolute;
  top:50%;
  left:50%;
  margin-left: -32px;
  margin-top: -32px;
}

#cursorFusee path {
  fill : #EC691E;
}
#stars {
  position:absolute;
  top:0;left:0;
  width:100%;
  height:100%;
  list-style:none;
  opacity:0;
}
#stars li {
  position:absolute;
  transition:left 0.3s ease-in-out 0s, top 0.3s ease-in-out 0s;
}
#stars li svg {
  width: 30px;
  height:42px;
  position:relative;
  z-index:2;
}
#stars li span {
  position:absolute;
  top:11px;
  line-height:20px;
  left:35px;
  font-family: "Muli", sans-serif;
  color:#ffffff;
  font-size:17px;
  letter-spacing: 1px;
  display:block;
  opacity:0;
  transition: opacity 1s ease-in-out 0s;
  overflow:hidden;
  width:0;
}
#stars li[data-active="true"] span {
  width:260px;
  opacity:1;
  height:22px;
}
#stars li:before {
  content:'';
  position:absolute;
  top:-2px;left:-8px;
  width:46px;height:46px;
  background:url('../imgs/lueur-2.svg') center center no-repeat;
  background-size:100% 100%;
  animation: shine2 2s linear infinite alternate;
  opacity : 0.4;
}
@media screen and (max-width:767px) {
  #stars li:before {
    top: -3px;
    left: -9px;
  }
  #stars li svg {
    width: 26px;
    height: 38px;
  }
  #stars li span {
    font-size:16px;
  }
}

@keyframes shine2 {
  0% {
    opacity : 0.4;
  }
  60% {
    opacity : 1;
  }
  100% {
    opacity : 1;
  }
}
#stars li:nth-child(1) {left:20%;top:5.5%;}
#stars li:nth-child(2) {left:19.5%;top:29.9%;}
#stars li:nth-child(3) {left:7.6%;top:42.9%;}
#stars li:nth-child(4) {left:23.6%;top:60.1%;}
#stars li:nth-child(5) {left:5.4%;top:80.5%;}
#stars li:nth-child(6) {left:34.3%;top:18.3%;}
#stars li:nth-child(7) {left:31.9%;top:79.1%;}
#stars li:nth-child(8) {left:50.2%;top:13.8%;}
#stars li:nth-child(9) {left:46.8%;top:37.9%;}
#stars li:nth-child(10) {left: 46.3%;top: 69.1%;}
#stars li:nth-child(11) {left:57.8%;top:53.5%;}
#stars li:nth-child(12) {left:65.3%;top:25.1%;}
#stars li:nth-child(13) {left:67.9%;top:40%;}
#stars li:nth-child(14) {left:72.2%;top:9.1%;}
#stars li:nth-child(15) {left:72.2%;top:81.4%;}
#stars li:nth-child(16) {left:77.2%;top:65.4%;}
#stars li:nth-child(17) {left:87.4%;top:15.9%;}
#stars li:nth-child(18) {left:84.5%;top:36.9%;}

@media screen and (max-width:1024px) {
  #stars li span {
    transition: opacity 0.8s ease-in-out 0.8s, width 0s linear 1.8s;
  }
  #stars li[data-active="true"] span {
    width:0;
    opacity:0;
  }
  #stars li[data-hover="true"] span {
    width:260px;
    opacity:1;
    transition: opacity 0.2s ease-in-out 0s, width 0s linear 0s;
  }

  #stars li:nth-child(1) {left:13.14%;top:5.4%;}
  #stars li:nth-child(2) {left:8.52%;top:24.12%;}
  #stars li:nth-child(3) {left:10.65%;top:52.9%;}
  #stars li:nth-child(4) {left:17.87%;top:62.76%;}
  #stars li:nth-child(5) {left:10.55%;top:77%;}
  #stars li:nth-child(6) {left:33.33%;top:16.25%;}
  #stars li:nth-child(7) {left:10.68%;top:34.89%;}
  #stars li:nth-child(8) {left: 29.85%;top: 45.51%;}
  #stars li:nth-child(9) {left:35.64%;top:72.70%;}
  #stars li:nth-child(10) {left:88.70%;top:4.47%;}
  #stars li:nth-child(10) span{left:auto;right:35px;text-align:right;}
  #stars li:nth-child(11) {left: 72.53%;top: 11.07%;}
  #stars li:nth-child(11) span{left:auto;right:35px;text-align:right;}
  #stars li:nth-child(12) {left:58.88%;top:28.54%;}
  #stars li:nth-child(12) span{left:auto;right:35px;text-align:right;}
  #stars li:nth-child(13) {left:68.70%;top:40.98%;}
  #stars li:nth-child(13) span{left:auto;right:35px;text-align:right;}
  #stars li:nth-child(14) {left:48.72%;top:57.43%;}
  #stars li:nth-child(15) {left: 74.12%;top: 68.14%;}
  #stars li:nth-child(15) span{left:auto;right:35px;text-align:right;}
  #stars li:nth-child(16) {left:83.61%;top:21.71%;}
  #stars li:nth-child(16) span{left:auto;right:35px;text-align:right;}
  #stars li:nth-child(17) {left:86.20%;top:50.46%;}
  #stars li:nth-child(17) span{left:auto;right:35px;text-align:right;}
  #stars li:nth-child(18) {left:85.92%;top:80.67%;}
  #stars li:nth-child(18) span{left:auto;right:35px;text-align:right;}
}


#fusee-next,
#start-button {
  pointer-events: auto;
  -webkit-transform: translate(-50%, 0) scale(1);
  transform: translate(-50%, 0) scale(1);
}

#fusee-next[data-showed]:before {
  background:#ffffff;
  left:0;right:100%;
  width:auto;
  animation: moveLeft 6s 2s linear infinite;
  content:"";
  position:absolute;
  top:calc(100% + 5px);
  height:1px;
}
#fusee-next[data-showed]:after {
  content:"";
  position:absolute;
  top:calc(100% + 5px);
  height:1px;
  background:#ffffff;
  width:0;
  left:50%;
  transform:translate(-50%, 0);
  transition:all 0.4s ease-in-out 0s;
}

#fusee-next[data-showed]:hover:before {
  display:none;
}
#fusee-next[data-showed]:hover:after {
  width:100%;
}

@keyframes moveLeft {
  0% {
    left:0;right:100%;
  }
  10% {
    left:0;right:20%;
  }
  15% {
    left:20%;right:0;
  }
  20% {
    left:50%;right:0;
  }
  30% {
    left:100%;right:0;
  }
  100% {
    left:100%;right:0;
  }
}
@keyframes zoomInOut {
  0% {
    -webkit-transform:translate(-50%, 0)scale(1);
    transform:translate(-50%, 0)scale(1);
  }
  10% {
    -webkit-transform:translate(-50%, 0)scale(1.1);
    transform:translate(-50%, 0)scale(1.1);
  }
  20% {
    -webkit-transform:translate(-50%, 0)scale(1);
    transform:translate(-50%, 0)scale(1);
  }
  100% {
    -webkit-transform:translate(-50%, 0)scale(1);
    transform:translate(-50%, 0)scale(1);
  }
}

#start-button:after,
#start-button:before,
#screen5TitleContact-action:after,
#screen5TitleContact-action:before,
#screen5TitleData-action:after,
#screen5TitleData-action:before{
  content:"";
  position:absolute;
  top:calc(100% + 5px);
  height:1px;
  background:#ffffff;
  width:0;
  transition:width 0.4s ease-in-out 0s;
}
#start-button:before,
#screen5TitleContact-action:before,
#screen5TitleData-action:before {
  right:50%;
}
#start-button:after,
#screen5TitleContact-action:after,
#screen5TitleData-action:after {
  left:50%;
}
#start-button:hover:after,
#start-button:hover:before,
#screen5TitleContact-action:hover:after,
#screen5TitleContact-action:hover:before,
#screen5TitleData-action:hover:after,
#screen5TitleData-action:hover:before{
  width:50%;
}
#particles {
  position:absolute;
  pointer-events: none;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:11;
}

/* Utilitaire */
.nq-u-absAlign {
  position:absolute;
  top:50%;
  left:50%;
  text-align:center;
  -webkit-transform:translate(-50%, -50%);
  transform:translate(-50%, -50%);
  max-width:100%;
}
.nq-u-absAlign[data-startbtn] {
  z-index:11;
}

.nq-u-title {
  font-size:42px;
  letter-spacing: 7px;
  width:100%;
  padding: 0 20px;
  font-weight:400;
  line-height: 1.4;
  pointer-events: none;
  user-select: none;
}
.nq-u-title[data-tl="sr1-1"] {
  margin-top: -15px;
}

@media screen and (max-width:1023px) {
  .nq-u-title {
    font-size:32px;
    letter-spacing: 5px;
  }
}
@media screen and (max-width:767px) {
  .nq-u-title {
    font-size:28px;
    letter-spacing: 4px;
    line-height: 1.5;
  }
}
@media screen and (max-width:480px) {
  .nq-u-title {
    font-size:24px;
    letter-spacing: 3px;
    line-height: 1.5;
  }
}

.nq-u-invisible {
  opacity:0;
}

#frontLight,
#backLight {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background: transparent url('../imgs/front-gradient.png') center center no-repeat;
  background-size:cover;
  pointer-events: none;
}
#backlight {
  z-index:8;
  opacity:0;
}
#frontLight {
  z-index:1000;
  opacity:1;
}

/* cursor */
.nq-c-sectionCursor {
  position:fixed;
  z-index:1000;
  pointer-events:none;
  height:24px;
  width:24px;
  border:1px #FF7130 solid;
  border-radius:12px;
  margin:-12px 0 0 -12px;
  opacity:0;
  user-select: none;
}
.nq-c-sectionCursor[data-screen="4"]{
  border:none;
}
.nq-c-sectionCursor-loaderWrapper {
  position:absolute;
  width:100%;
  height:100%;
  top:0;left:0;
}
#cursorLoader {
  width:74px;
  height:74px;
  position:absolute;
  top:50%;
  left:50%;
  margin: -37px 0 0 -37px;
}
#cursorText {
  position:absolute;
  top:50%;
  left:50%;width:74px;
  text-align:center;
  color:#ffffff;
  font-size:13px;
  letter-spacing:2px;
  -webkit-transform:translate(-50%, -50%);
  transform:translate(-50%, -50%);
  opacity:0;
}

.nq-c-sectionCursor-pulse {
  height:24px;
  width:24px;
  border:1px #FF7130 solid;
  border-radius:12px;
  position:absolute;
  top:50%;
  left:50%;
  -webkit-transform:translate(-50%,-50%);
  transform:translate(-50%,-50%);
  opacity: 1;
}
.nq-c-sectionCursor[data-pulse="true"] .nq-c-sectionCursor-pulse {
  animation: pulse 1s linear 1;
}
@keyframes pulse
{
  0% {height:24px;width:24px;border-radius:12px;opacity:1;}
  8% {height:22px;width:22px;border-radius:11px;opacity:1;}
  15% {height:30px;width:30px;border-radius:15px;opacity:1;}
  30% {height:50px;width:50px;border-radius:25px;opacity:0.5;}
  100% {height:120px;width:120px;border-radius:60px;opacity:0;}
}
#cake {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  opacity:0;
  margin-top:110px;
}
#cakeBg {
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:rgba(0,0,0,1);
  z-index:0;
  opacity:0;
}

.candleSmokeImage {
  position:absolute;
  bottom:100%;
  width:300px;
  height:300px;
  left: -8px;
  margin-bottom: -13px;
  opacity:0;
}
.candleSmokeImage + .candleSmokeImage {
  left:151px;
}
.candleSmoke {
  position:absolute;
  bottom:100%;
  transform:scale(0.05, 0.3);
  transform-origin: bottom center;
  left: -363px;
  margin-bottom: -12px;
}
.candleSmoke + .candleSmoke {
  left:-203px;
}
.candleHandler {
  position:absolute;
  left:50%;
  bottom:100%;
  margin-left:-105px;
  margin-bottom:-30px;
  width: 34px;
  height:120px;
  z-index:3;
}
.candleWrapper {
  position:absolute;
  left:50%;
  bottom:100%;
  margin-left:-105px;
  margin-bottom:-18px;
  opacity:1;
  transition:transform 0.1s ease-in, opacity 0.2s ease-out;
  transform-origin: bottom center;
}
.candleWrapper + .candleHandler {
  margin-left:54px;
}
.candleWrapper + .candleHandler + .candleWrapper {
  margin-left:54px;
}

.candle {
  width: 34px;
  -webkit-animation: blink 0.1s infinite;
  animation: blink 0.1s infinite;
}
.candleBase {
  width: 450px;
  position:relative;
  z-index:2;
}
@media screen and (max-width:768px),
       screen and (max-height:600px) {
  #cake {
    margin-top: 50px;
  }
  .candleSmokeImage {
    left: -15px;
    width:200px;
    margin-bottom: -15px;
  }
  .candleSmokeImage + .candleSmokeImage {
    left: 80px;
  }

  .candleBase {
    width:270px;
  }
  .candleWrapper {
    margin-left: -70px;
    margin-bottom: -8px;
  }
  .candleHandler {
    margin-left: -71px;
    margin-bottom: -21px;
  }
  .candleWrapper + .candleHandler {
    margin-left:26px;
  }
  .candleWrapper + .candleHandler + .candleWrapper {
    margin-left: 26px;
  }
}

.candleWrapper[data-off] {
  -webkit-animation: flameOff 0.12s ease-in forwards;
  animation: flameOff 0.12s ease-in forwards;
}

@-webkit-keyframes flameOff {
  0% {
    transform:scale(1, 1) rotate(0);
    opacity:1;
  }
  100% {
    transform:scale(0.1, 0.3) rotate(-35deg);
    opacity:0;
  }
}

.wick {
position: absolute;
width: 6px;
height: 50px;
background: #23161a;
top: 110px;
left: 50%;
transform: translateX(-50%) skewX(2deg);
border-radius: 10%;
box-shadow: 0 0 2px 0px black;
}
.wick:before {
content: "";
position: absolute;
width: 0;
left: 50%;
height: 10px;
box-shadow: 0 -14px 10px 8px white, 0 -10px 10px 8px rgba(255, 215, 0, 0.7), 0 -3px 10px 8px rgba(255, 106, 0, 0.7), 0 6px 3px 4px black;
}
.wick:after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
width: 0px;
height: 0px;
box-shadow: 0 5px 2px 3px gold, 0 20px 2px 14px gold, 0 -6px 4px 5px rgba(98, 33, 27, 0.8), 0 0px 1px 4px rgba(255, 106, 0, 0.7), 0 0px 3px 4px #ff6a00, 0 5px 3px 4px gold;
}

.flame {
width: 20px;
height: 80px;
margin: 0px auto;
position: relative;
-webkit-animation: move 3s infinite, move-left 3s infinite;
animation: move 3s infinite, move-left 3s infinite;
transform-origin: 50% 90%;
}
.flame .top {
width: 20px;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: white;
border-top-left-radius: 500%;
border-bottom-left-radius: 50px;
border-top-right-radius: 500%;
border-bottom-right-radius: 50px;
transform: skewY(-10deg);
box-shadow: 0 0px 0px 3px white,
0 -20px 1px 4px white,
0 -25px 2px 3px gold,
0 -30px 5px 4px #ff6a00,
0 0px 150px 10px #ff6a00,
0 -10px 2px 4px white,
0 -5px 3px 3px white;
-webkit-animation: flame-up 4s infinite;
animation: flame-up 4s infinite;
}
.flame .shadows {
  position: absolute;
  left: 50%;
  top: -28px;
  width: 1px;
  height: 50px;
  margin-left: -4px;
  border-radius: 50%;
  box-shadow: 0 5px 225px 15px gold,
  0 0px 200px 50px #f7c29c,
  0 15px 200px 35px #f7c29c,
  5px 30px 200px 33px #f7c29c,
  5px 50px 7px 16px #ff6a00,
  0 75px 200px 60px #e8e22c;
}
.flame .bottom {
transform: scale(0.9);
position: absolute;
bottom: 6px;
left: 9px;
width: 1px;
height: 8px;
border-radius: 1%;
  opacity: 0.95;
background: #59586f;
box-shadow: 0 6px 10px 12px rgba(60, 76, 125, 0.3),
0 0px 4px 8px #59586f,
0 -12px 10px 8px rgba(255, 106, 0, 0.5),
0 5px 7px 12px #59586f,
0 -3px 10px 12px #59586f,
5px -10px 10px 5px red,
0 -15px 10px 10px gold,
5px -25px 10px 5px gold,
0 2px 5px 10px #30537d,
0 -2px 2px 14px #76daff,
0 2px 10px 12px #76daff;
}

@media screen and (max-width:768px) {
  .flame .shadows {
    top: -28px;
    height: 50px;
    box-shadow: 0 5px 100px 15px gold, 0 0px 90px 20px #f7c29c, 0 15px 90px 15px #f7c29c, 5px 30px 80px 12px #f7c29c, 5px 50px 7px 16px #ff6a00, 0 75px 69px 30px #e8e22c;
  }

}

.wax {
position: relative;
top: 15px;
width: 100%;
height: 100%;
background: #ff9224;
background: linear-gradient(to bottom, #ff9224 0px, #ff9224 20px, #58523a 50px);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#ff9224", endColorstr="#58523a",GradientType=0 );
border-top-left-radius: 10px;
border-top-right-radius: 10px;
box-shadow: inset 0 7px 12px -2px #fbf348, inset 0 9px 57px -3px rgba(255, 0, 0, 0.4), inset 0 -5px 8px 2px black, 0 0 3px 0px #ff6a00;
}


@-webkit-keyframes move {
0% {
  transform: skewX(2deg) skewY(5deg);
}
50% {
  transform: skewX(-2deg) skewY(0deg);
}
100% {
  transform: skewX(2deg) skewY(5deg);
}
}

@keyframes move {
0% {
  transform: skewX(2deg) skewY(5deg);
}
50% {
  transform: skewX(-2deg) skewY(0deg);
}
100% {
  transform: skewX(2deg) skewY(5deg);
}
}
@-webkit-keyframes move-left {
50% {
  transform: skewX(3deg);
}
}
@keyframes move-left {
50% {
  transform: skewX(3deg);
}
}
@-webkit-keyframes flame-up {
50% {
  box-shadow: 0 0px 0px 3px white, 0 -38px 1px 2px white, 0 -41px 2px 3px gold, 0 -50px 5px 4px #ff6a00, 0 0px 150px 10px #ff6a00, 0 -10px 2px 4px white, 0 -5px 3px 3px white;
}
}
@keyframes flame-up {
50% {
  box-shadow: 0 0px 0px 3px white, 0 -38px 1px 2px white, 0 -41px 2px 3px gold, 0 -50px 5px 4px #ff6a00, 0 0px 150px 10px #ff6a00, 0 -10px 2px 4px white, 0 -5px 3px 3px white;
}
}
@-webkit-keyframes blink {
50% {
  opacity: 0.95;
}
}
@keyframes blink {
50% {
  opacity: 0.95;
}
}