/* Recharger Toujours la page si la taille de la fenêtre est modifiée*/

/*===================== Base =====================*/
@font-face {
    font-family: naked-power;
    src: url(font/nakedPowerBold.woff2);
}

/*_________ Body ____________*/
body {
    background-color: #171D33;
    color: #E4E2FF;
    margin: 0;
    padding: 0;
    font-family: naked-power;

}

p {
    font-size: clamp(12px, 1vw, 22px);
}

/*_________ Landing page ____________*/
.landingpage {
    background-image: url(img/bgordi.png);
    background-repeat: no-repeat;
    background-size: 100%;
    min-height: 100%;
}

/*_________ Main ____________*/
main {
    position: relative;

}

/*_________ Sections ____________*/
section {

    margin-left: 10vw;
    margin-right: 10vw;
    min-height: 50vh;
    display: flex;
    position: absolute;
    width: 100%;
    max-width: 90vw;
}

.section-col {
    width: 30%;
}

/*_________ Images ____________*/
.parcours-box img {
    width: 100%;
}

.path {
    position: absolute;
    width: 100%;
    opacity: 0%;
    pointer-events: none;
}

#svg-path {
    width: 100%;
}

#bus {
    position: absolute;
    width: 10dvw;
    transform-origin: center;
    transform: translateX(-50%) translateY(-50%);

}

#pathteste {
    position: absolute;
}

.parcours-ligne img {
    position: absolute;
    width: 100%;
    opacity: 50%;
}

/*===================== Textes et Sections =====================*/

/*_____________ Sécurité _______________*/
#securite {
    top: 3%;
}

#securite .section-col:first-of-type {
    width: 60%;
}

#securite .section-col:last-of-type {
    width: 30%;
}

/*_____________ Adaptabilité _______________*/
#adaptabilite {
    top: 13%;

}

#adaptabilite .section-col:first-of-type {
    width: 48%;
}

#adaptabilite .section-col:last-of-type {
    width: 30%;
}

/*_____________ Praticité _______________*/
#praticite {
    top: 22%;
}

#praticite .section-col:first-of-type {
    width: 47%;
}

#praticite .section-col:last-of-type {
    width: 30%;
}

/*_____________ Infos 1 _______________*/

#info1 {
    top: 52%;
}

#info1 .section-col:first-of-type {
    width: 15%;
}

#info1 .section-col:last-of-type {
    width: 60%;
}

/*_____________ Info 2 _______________*/
#info2 {
    top: 63%;
}

#info2 .section-col:first-of-type {
    width: 10%;
}

#info2 .section-col:last-of-type {
    width: 60%;
}

/*_____________ Info 3 _______________*/
#info3 {
    top: 73%;
}

#info3 .section-col:first-of-type {
    width: 44%;
}

#info4 .section-col:last-of-type {
    width: 60%;
}

/*===================== Vidéos =====================*/

.video {

    position: relative;
    position: absolute;
    top: 37%;
    aspect-ratio: 16/9;
    min-height: 0;
    max-width: 90vw;
    margin-left: 5vw;
    margin-right: 5vw;

}

#capsule {
    position: relative;
    position: absolute;
    top: 80%;
    aspect-ratio: 16/9;
    min-height: 0;
    max-width: 90vw;
    margin-left: 5vw;
    margin-right: 5vw;
}


/*===================== Responsive =====================*/

/*_____________ Securité _______________*/
@media (max-width: 768px) {
    #securite {
        top: 1%;
    }
}

/*_____________ Adaptabilité _______________*/
@media (max-width: 768px) {
    #adaptabilite {
        top: 11%;
    }
}

/*_____________ Praticité _______________*/
@media (max-width: 768px) {
    #praticite {
        top: 21%;
    }
}

/*_____________ Info 1 _______________*/
@media (max-width: 768px) {
    #info1 {
        top: 52%;
    }

    #info1 .section-col:last-of-type {
        width: 70%;
    }
}

/*_____________ Info 2 _______________*/
@media (max-width: 768px) {
    #info2 {
        top: 62%;
        right: 1%;
    }

    #info2 .section-col:last-of-type {
        width: 70%;
    }
}

/*_____________ Info 3 _______________*/
@media (max-width: 768px) {
    #info3 {
        top: 73%;
    }

    #info3 .section-col:last-of-type {
        width: 70%;
    }
}

/*_____________ Vidéo _______________*/
@media (max-width: 768px) {
    .video {
        color: red;
    }
}