/*STYLE */
@font-face {
    font-family: 'Acumin Pro Wide';
    src: url('../fonts/acumin-pro-wide-medium-webfont.woff2') format('woff2'),
         url('../fonts/acumin-pro-wide-medium-webfont.woff') format('woff');
    font-weight: 500;
    font-style: normal;

}
@font-face {
    font-family: 'Acumin Pro Wide';
    src: url('../fonts/acumin-pro-wide-webfont.woff2') format('woff2'),
         url('../fonts/acumin-pro-wide-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;

}
@font-face {
    font-family: 'Acumin Pro Wide';
    src: url('../fonts/acumin-pro-wide-extralight-webfont.woff2') format('woff2'),
         url('../fonts/acumin-pro-wide-extralight-webfont.woff') format('woff');
    font-weight: 300;
    font-style: normal;

}
html,
body{
    position: relative;
    height: 100%;
    width: 100%;
    color: #FFF;
    font: normal normal 300 14px/20px 'Acumin Pro Wide';
}
body{
    overflow-x: hidden;
    widows: 3;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: antialiased;
	font-smoothing: antialiased;
}
#loader{
    position: fixed;
    z-index: 99999;
    top: 0;
    left: 0;
    right: 0;
    bottom:0;
    background: #FFF url(../img/loader.gif) 50% 50% no-repeat;
}
strong{
    font: normal normal 500 14px/20px 'Acumin Pro Wide';
}
.offset-15 {
    margin-left: 12.5%;
}
.offset-45 {
    margin-left: 37.5%;
}
.parallax{
    will-change: transform;
}
body.loaded #loader{
    display: none;
}
.centered,
.centered2{
    width: 100%;
    height: 8vh;
    position: absolute;
    top: calc(50% - 4vh);
    left: 0;
}
.from-top.centered{
    height: 45%;
    top: 0;
}
#section-5 .centered{
    height: 1px;
    top: calc(100% - 100vh);
}
#section-5 .centered2{
    height: 20vh;
    top: calc(100% - 54vh);
}
#section-8 .centered{
    height: 18vh;
    top: calc(50% - 9vh);
}
#section-12 .centered{
    height: 1px;
    top: calc(50% - 180px);
}
#section-15 .centered{
    height: 40vh;
    top: calc(45% - 20vh);
}
#gyrofocus1 .centered{
    top: auto;
    bottom: 65vh;
    height: 1px;
}
.youtube_player iframe{
    height: 100%;
    width: 100%;
}
#etoiles{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 0;
}
body{
    background: #0b1422;
}
#logo{
    display: block;
    background: url(../img/logo-focus.png) 50% 50%/contain no-repeat;
    width: 6.5vw;
    max-width: 100%;
    height: 3.11vw;
    font-size: 0;
    color: transparent;
}
.offcanvas{
    --bs-offcanvas-width: 466px;
    --bs-offcanvas-padding-x: 71px;
}
.offcanvas-body .nav>li{
    list-style: none;
    display: block;
}
.offcanvas-body .nav-item{
    display: inline-block;
    margin: 1vw 0;
    color: #000;
    text-decoration: none;
    font: normal normal normal 24px/30px Marcellus;
}
.offcanvas-footer{
    padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x)
}
.offcanvas-footer img,
.lang img{
    width: 100%;
    max-width: 16px;
    height: auto;
    margin: 0 3px 0 0;
}
.offcanvas-footer img{
    max-width: 12px;
    margin: 0 5px 0 0;
    vertical-align: baseline;
}
.offcanvas-footer a,
.lang a{
    display: inline-block;
    line-height: 1;
    color: inherit;
    text-decoration: none;
    text-transform: uppercase;
    font: normal normal normal 12px/16px 'Acumin Pro Wide';
}
.lang a{
    margin: 0 6.5px;
    font: normal normal medium 12px/16px 'Acumin Pro Wide';
    letter-spacing: 0.24px;
}
#disclaimer{
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    transform-origin: top center;
    transform: translate(calc(-50% - 16px),calc(-50%  - 22px)) rotate(-90deg);
    font-size: 11px;
    color: #FFF;
    text-decoration: none;
}
.offcanvas-body .nav-item:hover,
.offcanvas-body .nav-item:focus,
.offcanvas-footer a:hover,
.offcanvas-footer a:focus,
.lang a:hover,
.lang a:focus,
.lang a.active{
    text-decoration: underline;
}
.dummysection,
.swiper-slide {
    position: relative;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 150vh;
}
.dummysection{
    height: 100vh;
    pointer-events: none;
}
h2,h3{
    font: normal normal normal 28px/35px Marcellus;
}
#section-8 .centered + .target .move-1,
#section-8 .centered + .target .move-2{
    transform:translateY(-22vh);
    opacity: 0;
    transition: transform 4s ease , opacity .4s ease;
}
#section-8 .centered + .target .move-2{
    transform:translateY(22vh);
}
#section-8 .centered.is-in-viewport + .target .move-1,
#section-8 .centered.is-in-viewport + .target .move-2{
    transform:translateY(-2vh);
    opacity: 1;
    transition: transform 1.5s ease .3s, opacity .3s ease .3s;
}
#section-8 .centered.is-in-viewport + .target .move-2{
    transform:translateY(2vh);
}
#section-8{
    font: normal normal normal 24px/1.4 'Acumin Pro Wide';
}
#section-8 .img{
    position: relative;
}
#section-8 .img>span{
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 12px;
    color: #FFF;
    text-shadow: 0 0 4px #000;
    font: normal normal 700 12px/1.4 'Acumin Pro Wide';
    text-transform: uppercase;
    text-align: left;
}
#section-8 .centered + .target .move-3{
    opacity: 0;
    transform:translateY(22vh);
    transition: transform 1.5s ease .5s, opacity .3s ease .5s;
}
#section-8 .centered.is-in-viewport + .target .move-1,
#section-8 .centered.is-in-viewport + .target .move-2,
#section-8 .centered.is-in-viewport + .target .move-3{
    opacity: 1;
    transform:none;
}
[data-aos=defilement] h2{
    font: normal normal normal 140px/175px 'Marcellus'; 
    min-width: max-content;
}
#section-1 h2,
#section-2 h2,
#section-3 h2,
#section-4 h2{
   font: normal normal normal 84px/106px 'Marcellus'; 
}
#section-18 h2{
   font: normal normal normal 28px/45px 'Marcellus'; 
}
#section-13{
    font: normal normal normal 22px/1.4 'Marcellus'; 
}
#section-16 h2{
   font: normal normal normal 28px/35px 'Marcellus'; 
}
#section-12 img,
#section-7 img{
    width: auto;
    height: 39px;
}
#section-16 img{
    max-width: 56px;
}
#section-12 .col-4 +.col-4 +.col-4 img,
#section-7 .col-6 + .col-6>img{
    width: auto;
    height: 42px;
    margin-top: -3px;
}
#section-8{
    font: normal normal normal 42px/53px Marcellus;
}
#section-8 .small{
    font: normal normal normal 20px/1.4 'Acumin Pro Wide';
}
section-11{
    font: normal normal 300 14px/20px 'Acumin Pro Wide';
}
#section-1 h2,
#section-2 h2,
#section-3 h2,
#section-4 h2,
#section-5 .target{
    opacity: 0;
    transition: opacity .4s ease;
}
#section-1 .centered.is-in-viewport + h2,
#section-2 .centered.is-in-viewport + h2,
#section-3 .centered.is-in-viewport + h2,
#section-4 .centered.is-in-viewport + h2,
#section-5 .centered.is-in-viewport + .target{
    opacity: 1;
}
#section-5 .centered2:not(.is-in-viewport) + .centered + .target{
    opacity: 0;
}

[data-aos^=fade][data-aos^=fade]>.target.aos-animate{
    transition-property: transform;
    transition-duration: 1s;
}
#section-11 h2{
    transform: translate(6vw, -20px);
    opacity: 0;
    transition: transform .4s ease, opacity .4s ease;
}
#section-11 .centered.is-in-viewport + .target h2{
    transform: translate(0, -20px);
    opacity: 1;
    transition: transform 2s ease .3s, opacity .2s ease .3s;
}
#section-11 .move-1{
    border-top: 1px #FFF solid;
    font-size: 14px;
}
#section-11 .target{
    opacity: 0;
    transition: opacity .4s ease;
}
#section-11 .centered.is-in-viewport + .target{
    opacity: 1;
}
#section-13 h2,
#section-12 h2,
#section-12 .move-1,
#section-12 .move-2,
#section-12 .move-3,
#section-12 .move-4{
    opacity: 0;
    transition: opacity .4s ease;
}
@media (min-width: 768px){
    #section-12 .centered.is-in-viewport + .target .move-1{
        transition-delay: .2s;
    }
    #section-12 .centered.is-in-viewport + .target .move-2{
        transition-delay: .4s;
    }
    #section-12 .centered.is-in-viewport + .target .move-3{
        transition-delay: .6s;
    }
    #section-12 .centered.is-in-viewport + .target .move-4{
        transition-delay: 1.2s;
    }
    #section-12 .centered.is-in-viewport + .target h2,
    #section-12 .centered.is-in-viewport + .target .move-1,
    #section-12 .centered.is-in-viewport + .target .move-2,
    #section-12 .centered.is-in-viewport + .target .move-3,
    #section-12 .centered.is-in-viewport + .target .move-4{
        opacity: 1;
        transition-duration: 2s;
    }
}
#section-13 .centered.is-in-viewport + .target h2{
    opacity: 1;
    transition-duration: 2s;
}
#section-8 .centered + .target,
#section-7 .centered + .target{
    opacity: 0;
    top: -5vw;
    transition: opacity .4s ease, top .4s ease;
}
#section-7 .centered + .target .move-1,
#section-7 .centered + .target .move-2{
    transform: translateX(-15vw);
    opacity: 0;
    transition: all .2s ease;
}
#section-7 .centered + .target .move-2{
    transform: translateX(15vw);
}
#section-7 .centered.is-in-viewport + .target .move-1,
#section-7 .centered.is-in-viewport + .target .move-2{
    transform: translateX(0);
    opacity: 1;
    transition: transform .5s ease .2s, opacity .3s ease .2s;
}
#section-8 .centered.is-in-viewport + .target,
#section-7 .centered.is-in-viewport + .target{
    opacity: 1;
    top: 0;
}
[data-aos=defilement3] img{
    transition-property: transform;
    transition-duration: 1s;
    transform: translate(-15vw, 0);
}
#section-5 .target{
    margin: auto auto 90vh;
}
#gyrofocus1 .titre{
    position: absolute;
    bottom: 25vh;
    left: 0;
    right: 0;
    text-align: center;
    opacity: 0;
    transition: opacity .3s ease;
}
#gyrofocus1 .centered.is-in-viewport + .titre{
    opacity: 1;
}
#gyrofocus1 h2{
    font: normal normal normal 96px/121px 'Marcellus';
    margin: 10px auto;
}
.bordures>.col-lg-6:first-of-type{
    border-right: 1px #FFF solid;
}
#section-12 .col-lg-4+.col-lg-4{
    border-left: 1px #FFF solid;
}
.btn{
    text-transform: uppercase;
    border: 1px #FFF solid;
    border-radius: 40px;
    color: #FFF;
    font: normal normal normal 12px/12px 'Acumin Pro Wide';
    letter-spacing: 0.24px;
    background: none;
    padding: 3px 9px 4px;
}
.btn:hover,
.btn:focus{
    color: #000;
    background: #FFF;
}
/*Firefox*/
@-moz-document url-prefix() {
    .btn{
        padding: 6px 9px 5px;
    }

}
.offcanvas .btn{
    color: #000;
    border-color: #000;
    transform: translateX(calc(var(--bs-offcanvas-padding-x) - 15px));
}
.offcanvas .btn:hover,
.offcanvas .btn:focus{
    background: #000;
    color: #FFF;
    border-color: #000;
}
#gyrofocus-video{
    display: block;
    position: relative;
    width: 100%;
    height: 0;
    padding: 47.135417% 0 0;
}
#gyrofocus-video:before{
    content:'';
    display: block;
    position: absolute;
    top: -34.64609919%;
    left: 0;
    right: 0;
    height: 34.64609919%;
    background: url(../img/gyrofocus-video-col2.png) 50% 0 / cover no-repeat;
}
#gyrofocus-video:after{
    content:'';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url(../img/gyrofocus-video-cache2.png) 50% 0 / cover no-repeat;
}
#gyrofocus-video{
    transform: translateY(-15vh);
    transition: transform 2.5s ease .3s;
}
#gyrofocus-video.triggered{
    transform: translateY(0);
}
#section-13-move{
    pointer-events: none;
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    transform: translateX(50vw);
    opacity: 0;
    transition: transform .1s ease .4s, opacity .4s ease; 
}
#section-13-move.triggered{
    transform: translateX(0);
    opacity: 1;
    transition: transform 1s ease, opacity .6s ease; 
}
#decouverte,
#demande-etude{
    pointer-events: none;
    opacity: 0;
    position: fixed;
    bottom: 25px;
    left: 15px;
    transform: translateY(30px);
    transition: all 1s ease;
    z-index: 1;
}
#decouverte.triggered,
#demande-etude.triggered{
    pointer-events: all;
    display: block;
    opacity: 1;
    transform: translateY(0);
}
#decouverte{
    left: 50%;
    transform: translateX(-50%);
}
#decouverte.triggered{
    transform: translateX(-50%);
}
#decouverte.clicked{
    left: 15px;
    transform: translateX(0);
}
figure{
    position: relative;
}
figure figcaption{
    position: absolute;
    top: 0;
    right: 0;
    transform-origin: 50%;
    transform: translate(50%, 25%) rotate(90deg);
    font: normal normal normal 65px/90px Marcellus
}
#section-15{
    font: normal normal normal 21px/26px 'Marcellus';
}
#section-15 .small img{
    height: 13px;
    width: auto;
}
#section-15 .small{
    font: normal normal 300 14px/20px 'Acumin Pro Wide';
}
#section-15 .col-7{
    font: normal normal 300 14px/20px 'Acumin Pro Wide';
}
#section-15 .col-7 img{
    width: auto;
    height: 41px;
}
#section-15 figure{
    flex: 0 0 auto;
    width: 52%;
    margin: 0 4.666% 0 -15%;
    transform: translateX(-5vw);
    opacity: 0;
    transition: transform .5s ease .1s, opacity .5s ease .1s;
}
#section-15 .move-1{
    opacity: 0;
    transition: all .4s ease .3s;
}
#section-15 figure.is-in-viewport{
    transform: translateX(0);
    opacity: 1;
}
#section-15 .move-1.is-in-viewport{
    opacity: 1;
}
#section-15 h2{
    position: relative;
    z-index: 1;
}
#section-15 .target{
    opacity: 0;
    transition: opacity .3s ease;
}
#section-15 .centered.is-in-viewport + .target,
#section-15 .centered.is-in-viewport + .target .target{
    opacity: 1;
    transition: opacity .4s ease;
}
#section-15 .target2{
    transition: transform 2s ease .5s;
    transform: translateY(-15vh);
}
#section-15.is-in-viewport .target2{
    transform: translateY(0);
}
#section-15 h2{
    margin-top: -80px;
}
#section-18 .move-1,
#section-18 .move-2{
    opacity: 0;
    transform: translateY(-6vh);
    transition: opacity .5s ease .2s, transform .8s ease .25s; 
}
#section-18 .move-2{
    transform: translateY(6vh);
}
#section-18 h3,
#section-16 h2,
#section-16 a{
    opacity: 0;
    transform: translateY(-25px);
    transition: opacity .25s ease, transform .35s ease; 
}
#section-18 h3{
    transition-delay: .8s, .8s; 
}
#section-18 .centered.is-in-viewport + div .move-1,
#section-18 .centered.is-in-viewport + div .move-2,
#section-18 .centered.is-in-viewport + div h3,
#section-16 .centered.is-in-viewport + .target h2,
#section-16 .centered.is-in-viewport + .target a{
    opacity: 1;
    transform: translateY(0);
}

#gyrofocus-video>#vid-0{
    border-radius: 36% 36% 15% 15% / 45% 45% 15% 15%;
    overflow: hidden;
    position: absolute;
    left: 1.5625%;/*30/1920;*/
    top: 38.8027%;/*350/902;*/
    width: 96.875%;/*1860*/
    height: 42.1286%;/*380*/
}
#vid-0 .ratio-fire {
    --bs-aspect-ratio: 20.4301%;
}
#vid-1{
    border-radius: 45% 45% 17% 19% / 45% 45% 17% 17%;
    overflow: hidden;
    position: absolute;
    left: calc(50% - 22vh);
    top: 91.55247%;
    width: 44vh;
    height: 8.98vh;
}
#vid-1 .ratio-fire {
    --bs-aspect-ratio: 20.4301%;
}
#formulaire{
    position: relative;
    width: 100vw;
    height: 70vh;
}
#formulaire label,
#formulaire .select{
    display: block;
    color: inherit;
    text-decoration: none;
}
#formulaire input[type=radio]{
    display: none;
}
.bulle,
#formulaire .select>span,
#formulaire input[type=radio]+span{
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    text-transform: uppercase;
    font: normal normal normal 18px/26px 'Acumin Pro Wide';
    cursor: pointer;
    background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 240 240' version='1.1' xmlns='http://www.w3.org/2000/svg'><circle cx='120' cy='120' r='119' stroke='%23fff' stroke-width='1' stroke-dasharray='0 6' stroke-linecap='round' fill='transparent'/></svg>") 50% 50% / cover no-repeat;
    border-radius: 50%;
    overflow: hidden;
    padding: 2vw;
}
.bulle:before,
#formulaire .select>span:before,
#formulaire input[type=radio]+span:before {
    display: block;
    padding-top: 100%;
    content: "";
}

.bulle>div {
    cursor: auto;
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font: normal normal normal 18px/1.3 'Acumin Pro Wide';
    padding: 45px;
}
.bulle h3{
    font: normal normal normal 52px/1.3 Marcellus;
}
.radioselect{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
#formulaire .etape{
    position: absolute;
    top: 0;
    opacity: 0;
    transition: opacity .3s ease, transform .4s ease;
    left: 0;
    width: 100%;
    pointer-events: none;
}
#formulaire .etape.current{
    opacity: 1;
    pointer-events: auto;
}
input:not([type=radio]){
    background: transparent;
    color: #FFF;
    border: none;
    border-radius: 0;
    border-bottom: 1px #FFF solid;
    outline: none;
    box-shadow: none;
    padding: .375rem 0;
}
input:not([type=radio]):focus{
    background: #00000020;
    color: #FFF;
    box-shadow: none;
    border-color: #FFF;
}
.form-control{
    font: normal normal normal 14px/20px 'Acumin Pro Wide';
}
.form-control:-moz-placeholder,
.form-control::-moz-placeholder {
  color: #FFF;
  text-transform: uppercase;
}
.form-control:-ms-input-placeholder {
  color: #FFF;
  text-transform: uppercase;
}
.form-control::-webkit-input-placeholder,
.form-control::placeholder{
  color: #FFF;
  text-transform: uppercase;
}

/* NUAGES */
#fond,
#nuages,
#contenu{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    pointer-events: none;
    bottom: 0;
    will-change: opacity;
}
#contenu{
    pointer-events: auto;
    z-index: 1;
}
#stars-wrapper,
#arrivee,
#nuage,
#nuage_over1,
#nuage_over2,
#nuage_over3,
#texte{
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    right: 0;
    will-change: transform;
}
#dummies,
#arrivee,
#stars-wrapper,
#nuage{
    height: calc(var(--var-section0) + var(--var-section1-4) * 4 + var(--var-section5) + var(--var-section6) + var(--var-section7) + var(--var-section8) + var(--var-section9) +  var(--var-section11) + var(--var-section12) + var(--var-section13) + var(--var-section14) + var(--var-section15) + var(--var-section16) + var(--var-section17) + var(--var-section18) );
}
#nuage_over1{
    height: calc((var(--var-section0) + var(--var-section1-4) * 4 + var(--var-section5) + var(--var-section6) + var(--var-section7) + var(--var-section8) + var(--var-section9) + var(--var-section11) + var(--var-section12) + var(--var-section13) + var(--var-section14) + var(--var-section15) + var(--var-section16) + var(--var-section17) + var(--var-section18)) * 1.1);
}
#nuage_over2{
    height: calc((var(--var-section0) + var(--var-section1-4) * 4 + var(--var-section5) + var(--var-section6) + var(--var-section7) + var(--var-section8) + var(--var-section9) +  var(--var-section11) + var(--var-section12) + var(--var-section13) + var(--var-section14) + var(--var-section15) + var(--var-section16) + var(--var-section17) + var(--var-section18)) * 1.3);
}
#nuage_over3{
    height: calc((var(--var-section0) + var(--var-section1-4) * 4 + var(--var-section5) + var(--var-section6) + var(--var-section7) + var(--var-section8) + var(--var-section9) + var(--var-section11) + var(--var-section12) + var(--var-section13) + var(--var-section14) + var(--var-section15) + var(--var-section16) + var(--var-section17) + var(--var-section18)) * 1.4);
}
#texte{
    height: calc((var(--var-section0) + var(--var-section1-4) * 4 + var(--var-section5) + var(--var-section6) + var(--var-section7) + var(--var-section8) + var(--var-section9) + var(--var-section11) + var(--var-section12) + var(--var-section13) + var(--var-section14) + var(--var-section15) + var(--var-section16) + var(--var-section17) + var(--var-section18)) * 1.5);
}
#nuage{
    background: url(../img/fond.jpg) 50% 100%/ auto 45% no-repeat;
}
#stars-wrapper{
    background: linear-gradient(3deg, rgba(11,20,34,0) 32%, rgba(11,20,34,.2) 34%, rgba(11,20,34,1) 38%, #0b1422 100%);
}
#section-0{
    height: calc(var(--var-section0) * 1.5) ;
}
#part0{
    height: var(--var-section0); 
}
#section-1,
#section-2,
#section-3,
#section-4{
    height: calc(var(--var-section1-4) * 1.5);
}
#part1,
#part2,
#part3,
#part4{
    height: var(--var-section1-4);
}
#section-5{
    height: calc(var(--var-section5) * 1.5);
}
#part5{
    height: var(--var-section5);
}
#section-6{
    height: calc(var(--var-section6) * 1.5);
}
#part6{
    height: var(--var-section6);
}
#section-7{
    height: calc(var(--var-section7) * 1.5);
}
#part7{
    height: var(--var-section7);
}
#section-8{
    height: calc(var(--var-section8) * 1.5);
}
#part8{
    height: var(--var-section8);
}
#section-9{
    height: calc(var(--var-section9) * 1.5);
}
#part9{
    height: var(--var-section9);
}
#section-11{
    height: calc(var(--var-section11) * 1.5);
}
#part11{
    height: var(--var-section11);
}
#section-12{
    height: calc(var(--var-section12) * 1.5);
}
#part12{
    height: var(--var-section12);
}
#section-13{
    height: calc(var(--var-section13) * 1.5);
}
#part13{
    height: var(--var-section13);
}
#section-14{
    height: calc(var(--var-section14) * 1.5);
}
#part14{
    height: var(--var-section14);
}
#section-15{
    height: calc(var(--var-section15) * 1.5);
}
#part15{
    height: var(--var-section15);
}
#section-16{
    height: calc(var(--var-section16) * 1.5);
}
#part16{
    height: var(--var-section16);
}
#section-17{
    height: calc(var(--var-section17) * 1.5);
}
#part17{
    height: var(--var-section17);
}
#section-18{
    z-index: 1;
    height: calc(var(--var-section18) * 1.5) ;
}
#part18{
    height: var(--var-section18);
}
#section-18 .intro,
#section-18 .intro strong{
    font: normal normal normal 13px/1.3 'Acumin Pro Wide';
}

.cloud{
    width: clamp(150px, 45vw, 719px);
    padding: clamp(81px, 24.3vw, 388px) 0 0;
    position: absolute;
    top: var(--top);
    opacity: var(--opacity);
    transform: var(--trans);
    animation: var(--anim);
    background: url(../img/nuage.png) 0 0 / cover no-repeat;
    will-change: left;
}
.cloud2{
    background-image: url(../img/nuage2.png);
}
.cloudnight{
    background-image: url(../img/nuage-nuit.png);
}
#gyrofocus1{
    position: absolute;
    top: 58.6%;
    left: 0;
    width: 100%;
    height: 155vh;
    transition: top 1.3s ease .7s;
    background: url(../img/gyrofocus.png) 50% 100% / auto 155vh no-repeat;
}
@keyframes animate{
    0%{
        left: -100vw;
    }
    100%{
        left: 135vw;
    }
}
@keyframes animate2{
    0%{
        left: 24vw;
    }
    78%{
        left: 135vw;
    }
    78.00001%{
        left: -80vw;
    }
    100%{
        left: 24vw;
    }
}

/* STARS */
:root {
  --twinkle-duration: 4s;
}
.stars {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-animation: twinkle var(--twinkle-duration) ease-in-out infinite;
          animation: twinkle var(--twinkle-duration) ease-in-out infinite;
}
.stars:nth-child(2) {
  -webkit-animation-delay: calc(var(--twinkle-duration) * -0.33);
          animation-delay: calc(var(--twinkle-duration) * -0.33);
}
.stars:nth-child(3) {
  -webkit-animation-delay: calc(var(--twinkle-duration) * -0.66);
          animation-delay: calc(var(--twinkle-duration) * -0.66);
}
@-webkit-keyframes twinkle {
  25% {
    opacity: 0;
  }
}
@keyframes twinkle {
  25% {
    opacity: 0;
  }
}

.star {
  fill: white;
}
.star:nth-child(3n) {
  opacity: 0.8;
}
.star:nth-child(7n) {
  opacity: 0.6;
}
.star:nth-child(13n) {
  opacity: 0.4;
}
.star:nth-child(19n) {
  opacity: 0.2;
}


/* FILE UPLOAD */
.file-drop-area{
    position: relative;
    color: #FFF;
    background-color: transparent;
    outline: 2px dashed #FFF;
    padding: 50px 15px;
    outline-offset: -12px;
    transition:
    outline-offset 0.2s ease-out,
    outline-color 0.3s ease-in-out,
    background-color 0.2s ease-out;
}
.file-drop-area.is-active{
  outline-offset: -4px;
  outline-color: #0576bd;
  background-color:  #c8dadf;
}
.file-input {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  cursor: pointer;
  opacity: 0;
}
.file-input:focus {
    outline: none;
}
.file-placeholder{
    font-size: 75%;
}
.w-lg-50{
    width: 50%!important;
}
.w-lg-75 {
    width: 75%!important;
}
#modal{
    background: #FFFFFFc0;
}
#modal .modal-dialog{
    max-width: 800px;
}
#modal .modal-body{
    padding: 0;
}
#modal .modal-content{
    border-radius: 0;
    height: 600px;
    background: #000;
    color: #cd9677;
    padding: 40px 100px 50px;
    font: normal normal 700 20px/1.4 'Acumin Pro Wide';
    box-shadow: 0 0 30px rgba(0,0,0,.8);
}
#modal button{
    width: 35px;
    height: 35px;
    font-size: 22px;
    position: absolute;
    left: calc(100% + 100px);
    top: -41px;
    border: 0;
    background: #000;
    color: #FFF;
}
#modal button:active,
#modal button:hover{
    background: #cd9677;
}
#modal h2{
    font: italic normal 700 22px/1.4 'Acumin Pro Wide';
    margin: 0 auto;
    text-align: center;
}
#modal .modal-content a{
    color: #FFF;
    text-decoration: underline;
}
#modal .modal-content a:hover,
#modal .modal-content a:focus{
    color: #cd9677;
    text-decoration: none;
}
@media (min-width: 768px){
    .w-sm-50 {
        width: 50%!important;
    }
    .navbar-expand-md {
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
}
.tarteaucitronSelfLink{
    display: none!important;
}