@import url("fonts.css");
@import url("animations.css");
@import url("promethee.css");
@import url("new.css");

* {
    margin: 0;
    padding: 0;
}

html,
body {
    overflow-x: hidden;
}

section,
footer {
    position: relative;
    display: flex;
    width: 100%;
   min-height: 100vh;
    z-index: 0px;

}

/* Loader */
#overview {
    position: fixed;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: black;
    color: white;
    font-size: 28px;
    z-index: 100000;
    opacity: 1;
}

/* HTML: <div class="loader"></div> */
.loader {
    display: inline-flex;
    gap: 5px;
    animation: l2-0 1s infinite;
}

.loader:before,
.loader:after {
    content: "";
    width: 25px;
    aspect-ratio: 1;
    box-shadow: 0 0 0 3px inset #fff;
    animation: l2-1 1s infinite;
}

.loader:after {
    --s: -1;
}

@keyframes l2-0 {

    0%,
    50% {
        transform: rotate(0deg)
    }

    80%,
    100% {
        transform: rotate(180deg)
    }
}

@keyframes l2-1 {
    0% {
        transform: translate(0)
    }

    50%,
    80% {
        transform: translate(calc(var(--s, 1)*2.5px))
    }

    100% {
        transform: translate(0)
    }
}

/* fin Loader *********************************************/
/* portable section *************************************************************/
#insertmenu {
    position: fixed;
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: black;
    top: 0px;
    left: 0px;
    z-index: 1000000;
}

#portable-section {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.advertising,
.advertising-close {
    position: relative;
    z-index: 100000;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: black;
    border-bottom: 2px white solid;
    width: 100%;
    height: 45px;
    color: rgb(26, 203, 247);
    font-family: 'Arial';
    font-size: 10px;
    top: 0px;
    left: 0px;
    padding-bottom: 5px;
    padding-top: 5px;
}

.advertising {
    display: flex;
}

.advertising-close {
    display: none;
}


.menu-choose {
    display: none;
    flex-direction: column;
    position: relative;
    width: 100%;
    padding-top: 60px;

}

.choose-link {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: clamp(1rem, 5vw, 4rem);
}

.choose-other,
.choose-portail {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px white solid;
}

.choose-other {
    background-color: rgb(255, 255, 255, 0.1);
}

.up-logo {
    position: relative;
    padding-top: 25px;
    left: 0px;
    color: rgb(26, 203, 247);
    font-family: 'ArialBlack';
    font-size: clamp(1rem, 6vw, 4rem);
}

.logo-portable {
    position: relative;
    width: 95vw;
    padding: 10px;
}

.logo-portable img {
    width: 100%;
}

.logo-menu {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 95vw;
    margin-top: 50px;
    padding: 10px;
}

.logo-menu img {
    width: 50%;
}

#container-webgl-portable-interactive,
#container-webgl-portable {
    position: relative;
    padding-top: 80px;
    width: 300px;
    height: 300px;

}

#container-webgl-portable-interactive {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 60px;
    border: 1px white dashed;
}

.panel {
    position: absolute;
    padding-top: 5px;
    top: 0px;
    font-style: italic;

}

#change-3Dmodel {
    position: relative;
    display: flex;
    flex-direction: row;
}

#container-webgl-portable-360 {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 40px;
}

.cach-touch {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}

#zone-controler {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    top: 100px;
    width: 90%;
    height: 30px;
    border-left: 1px white solid;
    border-right: 1px white solid;
    z-index: 10000;
}

#orientation {
    position: absolute;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    top: 70px;
    width: 92%;
}

#controler {
    position: absolute;
    width: 10px;
    height: 30px;
    background-color: white;
    cursor: grab;
    touch-action: none;
    /* Important pour désactiver le scroll pendant le drag */
}

#strech {
    position: relative;
    width: 100%;
    height: 2px;
    background-color: white;

}

.message-private {
    text-align: center;
}

.webgl_portable {
    position: relative;
    display: block;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

.not_supported {
    position: absolute;
    display: none;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 100;
}

.info-desactivate {
    position: absolute;
    display: flex;
    flex-direction: row;
    align-items: center;
    bottom: 20px;
    left: 0px;
    z-index: 1000000;
}


.info-desactivate:hover {
    cursor: pointer;
}

.info-desactivate-text {
    color: red;
    font-size: 14px;
}

.container-complement-info {
    position: fixed;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    z-index: 100000;
}

.complement-info {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    border: 4px rgb(26, 203, 247) solid;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 15px;

    width: 80%;
    height: 70%;
    font-size: 18px;
    color: black;
}

.ci-img {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    width: 100%;
    height: 180px;
}

.ci-img:hover {
    cursor: pointer;
}

.ci-txt {
    padding: 20px;
}

.page-p {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 80%;
    top: 0px;
    left: 0px;
}

.page-p-section {
    position: relative;
    margin-top: 70px;
}

.image-p {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 10px;
    padding: 10px;
}

.image-p img {
    flex: 0 0 auto;
    width: 300px;
    scroll-snap-align: start;
    border-radius: 10px;
}

.swiper-container-wrapper {
    display: none;
}


/* fin portable section ************************************************************/

#first-section {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 100vh;
    overflow-y: hidden;
    overflow-x: hidden;
    color: white;
}

#getportail {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    color: white;
    font-family: 'ArialBlack';
    font-size: clamp(1rem, 1vw, 3rem);
}

.container-video {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    /*  background-image: url("../videos/splash1.jpg");
    background-size: 100%;
    background-repeat: no-repeat;*/
}

video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: black;
}

.logo {
    position: absolute;
    top:-20px;
    left: 100px;
    width: 100%;
    z-index: 100;
}

.sub-logo {
    position: absolute;
    top: 85px;
    left: 320px;
    color: rgb(26, 203, 247);
    font-family: 'ArialBlack';
    font-size: 30px;
}

.text-logo {
    position: relative;

}

.ctl {
    position: relative;
    padding-top: 20px;
    padding-right: 20px;
    left: 0px;
    max-width: 700px;
    font-family: 'Arial';
}

.dec {
    padding-left: 100px;
}

.text1 {
    position: relative;
    padding-top: 200px;
    left: 0px;
    font-family: 'ArialBlack';

}

.text2 {
    position: relative;
    margin-top: 50px;
    left: 0px;
    padding-left: 100px;
    font-family: 'Arial';
    max-width: 700px;
}

.h1 {
    /*font-size: 45px;*/
    font-size: clamp(1rem, 3vw, 3rem);
}

.h2 {
    font-size: clamp(1rem, 1vw, 3rem);
    /*font-size: 20px;*/
}

.f1 {
    padding: 30px 0 30px 0;
    font-family: 'ArialBlack';
}

.change-video {
    position: absolute;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    right: 20px;
    opacity: 0;
}

.round {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 110px;
    height: 110px;
    border: 4px white solid;
    border-radius: 60px;
    margin: 20px;
    color: white;
    opacity: 0;
    overflow: hidden;
    z-index: 100;
}

.img-round {
    position: absolute;
    width: 110px;
    height: 110px;

}

.into-round {
    position: absolute;
    font-family: 'ArialBlack';
    font-size: 15px;
    text-shadow: 2px 2px 2px black;
}


/* second section *********************************************/

#second-section {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    min-height: 100vh;
    overflow-y: hidden;
    overflow-x: hidden;
    background-color: rgb(0, 0, 0);
    color: white;
}

.text3 {
    position: relative;
    margin-top: 50px;
    left: 0px;
    padding-left: 100px;
    font-family: 'ArialBlack';
    max-width: 800px;
}

.imagerie {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    overflow: hidden;

}

.imagerie img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* third section *********************************************/
#container-webgl-1 {
    position: relative;
    top: 0px;
    left: 0px;
    width: 600px;
    height: 600px;
}

.webgl_1 {
    position: relative;
    display: block;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

#third-section,
#fourth-section {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    min-height: 100vh;
    overflow-y: hidden;
    overflow-x: hidden;
    background-color: rgb(0, 0, 0);
    color: white;
}

.columnforthree {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 800px;
}

.columnfloat {
    position: relative;
    top: 0px;
    left: 0px;
    display: flex;
    flex-direction: column;
    height: 800px;
}

.clickandmove {
    position: relative;
    top: 0px;
    right: 0px;
    opacity: 0.5;
    padding-top: 100px;
    z-index: 10000;
}

.intocanvas {
    position: relative;
    display: flex;
    flex-direction: row;
    padding-top: 100px;
    top: 0px;
    left: 0px;
}

.img-source {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    left: 0px;
    margin-top: 100px;
    padding-left: 100px;

}

.link-img,
.link-imgP {
    position: relative;
    margin: 10px;
    width: 80px;
    height: 80px;
    border: 2px white solid;
    border-radius: 18px;
}

.link-arrow {
    position: relative;
    color: white;
    font-size: 30px;
    margin: 20px;
}

.object-utility {
    position: relative;
    top: 0px;
    left: 0px;
    padding-top: 50px;
    padding-left: 100px;
    z-index: 10000;
    color: white;
}

.integration-sort {
    font-family: 'ArialBlack';
    font-size: 22px;
}

.integration-explain {
    margin-top: 10px;
    font-family: 'Arial';
    font-size: 18px;
}

.object-view {
    position: relative;
    top: 0px;
    right: 0px;
}

.object-modify {
    position: absolute;
    top: 600px;
    left: 50px;
    padding-left: 100px;
}

.style-background {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.style-of-view {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 20px;
    border: 2px white solid;
    border-radius: 18px;
    z-index: 10000;

}

.style-of-view:hover {
    cursor: pointer;
}


.presentation-of-view {
    position: fixed;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 100000;
    background-color: rgba(0, 0, 0, 1);
}

.cadre {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 80%;
    height: 90%;
    background-color: black;
}

.exit-view {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    width: 90%;
    height: 90%;
    z-index: 100000;
}

.get-cross {
    animation: rotating 5s linear infinite;
}

.get-cross:hover {
    cursor: pointer;
}

.comment-view {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 90%;
    height: 90%;
}

.first-comment-view {
    color: white;
    padding: 20px 0 0 20px;
}

.second-comment-view {
    color: white;
    padding: 5px 0 0 20px;
}

.subject,
.view {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.integration {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.subject:nth-child(2) {
    top: 20px;
}

.whataboutsubject,
.whataboutview {
    font-family: 'Arial';
    color: white;
    z-index: 10000;
}

.description-robot {
    position: relative;
    padding-left: 20px;
    padding-top: 5px;
    font-size: 16px;
    font-style: italic;
}

.color-object {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.color-to-choose {
    position: relative;
    width: 20px;
    height: 20px;
    margin: 20px;
    border: 2px white solid;
    border-radius: 18px;
    z-index: 10000;
}

.link {
    position: relative;
}

.link:hover {
    cursor: pointer;
}

/* fourth section *********************************************/
.webgl_2 {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
}

.webgl_3 {
    position: absolute;
    top: 50px;
    right: 150px;
    z-index: 100;

}

.help360 {
    position: absolute;
    top: 150px;
    right: 20px;
    z-index: 10000;
}

.sup {
    z-index: 1000;
}

.view360 {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    top: 0px;
    right: 150px;
    width: 150px;
    height: 150px;
    margin-top: 71px;
    margin-right: 71px;
    border: 4px white solid;
    border-radius: 180px;
    z-index: 1;
}

/* footer *********************************************/
#ending,
#ending-p {
    position: relative;
    top: 0px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    min-height: 100vh;
    background-color: black;

}

#ending-p {
    display: none;
}

.logo-foot {
    position: relative;
    top: 0px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

}

.getlogo {
    width: 100vw;
    height: 100vh;
    overflow: hidden;

}

.getlogo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.container-webgl-elemental, .container-webgl-elemental-footer, .container-webgl-elemental-index {
    position: relative;
    width: 300px;
    height: 300px;
    z-index: 10000;
}

.webgl_elemental {
    position: relative;
    display: block;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

#raccourcis {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
}

.block-raccourcis {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 0 60px 0 60px;
}

.title-rac {
    position: relative;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: 'roboto-black';
    font-size: 26px;
    padding: 0px 0 30px 0;
}

.content-rac {
    position: relative;
    font-family: 'roboto-thin';
    font-size: 18px;

}

.link-rac {
    position: relative;
    padding: 8px;
}

.link-footer,
.link-footer2 {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

.link-footer:hover,
.link-footer2:hover {
    color: aqua;
    text-decoration: none;
    cursor: pointer;
}

#copyright {
    position: absolute;
    bottom: 0px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    border-top: 1px rgb(123, 123, 124, 0.7) solid;
}

.copyright {
    padding: 10px;
    color: white;
}

/* LEGAL *********************************************/

.legal {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    padding: 20px 0 150px 100px;
}

.legal_h1 {
    position: relative;
    font-size: 45px;
    padding: 20px;
    font-family: 'ArialBlack';
    color: rgb(26, 203, 247);
}

.legal_h2 {
    position: relative;
    font-family: 'ArialBlack';
    font-size: 20px;
    padding: 20px;
}

.legal_h3 {
    position: relative;
    font-family: 'Arial';
    font-size: 20px;
    padding: 10px;
    width: 100%;

}

.color-blue {
    color: rgb(26, 203, 247);
    font-weight: bold;
}

.demande {
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px white solid;
}

select {
    
    font-size: 18px;
    padding: 5px;
}

input[type=text],
input[type=password],
input[type=email],
input[type=tel] {
    
    font-size: 14px;
    margin: 10px 0px 10px 0px;
    padding: 5px;
}

input[type=checkbox] {
    margin: 10px;
    padding: 10px;
}

textarea {
    font-size: 18px;
    margin: 20px 0px 20px 0px;
    padding: 5px;
}

#autre-container {
    display: none;
}

.align-input {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: space-between;

}

.formulaire {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
}


.log-form {
    position: relative;
    margin-left: 80px;
    color: red;
}

.button-old {
    padding: 10px 15px 10px 15px;
    cursor: pointer;
    font-family: 'ArialBlack';
    font-size: 18px;
    border-radius: 10px;
    background-color: #000000;
    color: rgb(26, 203, 247);
    border: 3px white solid;
}

.button-old:hover {
    background-color: white;
    color: rgb(7, 116, 143);
    border: 3px rgb(7, 116, 143) solid;
}

legend {
    margin-left: 10px;
    padding-left: 5px;
    padding-right: 5px;
    font-style: italic;

}

fieldset {
    padding: 5px;
}

/* PORTAIL *********************************************/
.portail {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
}

.text-portail {
    width: 700px;
    padding-right: 100px;
    font-family: 'Arial';
    font-size: 20px;
}

.acces-portail {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 500px;
    height: 340px;
    border: 2px rgb(26, 203, 247) solid;
    border-radius: 15px;
}

#formportail {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.align-portail-input {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.login {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    color: white;
    background-color: rgb(26, 203, 247);
    font-family: 'ArialBlack';
    font-size: 20px;
    border-radius: 12px 12px 0 0;
}

.login-in {
    padding: 20px;
}

.refused {
    position: relative;
    font-family: 'ArialBlack';
    font-size: 20px;
    padding: 10px;
}

/********portail***************************************************/
#open-client {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    background-color: black;
    min-height: 100vh;
}

#client {
    position: relative;
    display: flex;
    flex-direction: row;
    background-color: black;
    color: white;
    width: 100%;
}

.client-menu,
.client-out {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.client-out {
    width: 100%;
}

.client-menu {
    width: 250px;
    border-radius: 0 15px 0 0;
    border-top: 4px white solid;
    border-right: 4px white solid;
}

#client-logo {
    padding: 20px;
}

.client-option {
    font-size: 18px;
    font-family: 'ArialBlack';
    border-bottom: 1px white solid;
    padding: 20px;
}

.client-option:hover {
    cursor: pointer;
    color: aquamarine;
}

.onglets {
    position: relative;
    display: flex;
    flex-direction: row;
}

.client-onglet {
    position: relative;
    min-width: 100px;
    border-radius: 5px 5px 0 0;
    padding: 5px 10px 5px 10px;
    text-align: center;
    font-size: 16px;
    font-family: 'ArialBlack';
    width: 100%;
    color: rgba(255, 255, 255, 0.4);

}

.client-onglet:nth-child(2n+1) {
    border-bottom: 3px white solid;
}

.client-onglet:nth-child(2n) {
    border-top: 3px white solid;
    border-left: 3px white solid;
    border-right: 3px white solid;
    border-bottom: 3px white solid;
}

.client-onglet-close {
    position: relative;
    border-bottom: 3px white solid;
    width: 100%;
}

.client-check {
    position: relative;
    border-left: 1px white solid;
    width: 100%;
    height: 100%;
    padding: 0px;
}

.courrier {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px white solid;
    padding: 20px;
}

.nocourrier {
    position: relative;
    padding: 20px;
    font-size: 18px;
    font-family: 'Arial';
}

.courrier-list {
    position: relative;
    display: flex;
    flex-direction: column;
    font-size: 18px;
}

.courrier-sawn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px white solid;
    border-radius: 15px;
    padding: 10px;
    background-color: white;
    color: black;
    max-height: 30px;
}

.courrier-sawn:hover {
    cursor: pointer;
    background-color: black;
    color: white;
}