.pageContainer {
    overflow: hidden;
    justify-content: start
}

.pageElement {
    z-index: 0;
    flex: none;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(2.5px);
}

.pageTitle {
    font-size: 50pt;
    color: white;
    text-shadow: 0 0 25px #76ABAE;
    transition: 0.8s;
}

.pageTitleHidden {
    font-size: 0;

}

.overElement {
    height: 40px;
    min-width: 40px;
    border-radius: var(--default-border-radius);
    z-index: 1;
    margin: 20px;
    box-shadow: 0 0 5px #76ABAE;
    flex: none;
    position: absolute;
    align-items: center;
    transition: 0.2s;
    opacity: 1;
}

.btFermer {
    width: 40px;
    padding: 0;
    right: 0;
    cursor: pointer;
}


.overElementHidden {
    opacity: 0;
}

.ligneCroix {
    --passIndicatorWidth: 70%;
    width: var(--passIndicatorWidth);
    left: 15%;
    --height: 3px;
    height: var(--height);
    background: white;
    position: absolute;
    border-radius: calc(var(--default-border-radius) * 2);
    top: calc(50% - (var(--height) / 2));
    transition: 0.5s;
    z-index: 2;
}


.ligneCroixTourne:first-child {
    transform: rotate(45deg);
}

.ligneCroixTourne:last-child {
    transform: rotate(-45deg);
}

.scrollToPassBar {
    --passIndicatorHeight: calc(100% - 40px);
    height: var(--passIndicatorHeight);
    --width: 5px;
    width: var(--width);
    background: white;
    position: absolute;
    border-radius: calc(var(--default-border-radius) * 2);
    top: 20px;
    left: calc(50% - (var(--width) / 2));
    transition: 0.3s;
    z-index: 2;
}


.scrollToPass {
    --height-container: 20vh;
    height: var(--height-container);
    right: 0;
    margin-top: calc(50vh - var(--height-container) / 2);


}

.passIndicator {
    --avancee-pass: 0;
    --height-ind: calc(var(--passIndicatorHeight) * var(--avancee-pass));
    top: calc(50% - var(--height-ind) / 2);
    height: var(--height-ind);
    border-radius: 20%;
    box-shadow: 0 0 4px 2px #76ABAE;

}


.slideIndicator {
    --avancee-slide: 0;
    --width: 7px;
    border-radius: calc(var(--default-border-radius) * 2);
    background: #f43020;
    height: calc(var(--passIndicatorHeight) * var(--avancee-slide));
    z-index: 100;
}

.btOkEtape {
    height: 40px;
    width: 40px;
    border-radius: var(--default-border-radius);
    margin-right: 20px;
    /*box-shadow: 0 0 5px #ad5f5f;*/
    /*box-shadow: 0 0 5px #76ABAE;*/
    backdrop-filter: blur(5px);
    box-shadow: 0 0 5px #76ae7d;
    flex: none;
    align-items: center;
    transition: 0.2s;
    opacity: 1;
    cursor: pointer;
}

.btOkEtapeValide {
    background-color: #76ae7d;

}

.btOkEtapeLigne {
    height: 3px;
    position: relative;
    background: white;
    border-radius: calc(var(--default-border-radius) * 2);
    transition: 0.5s;
    opacity: 1;
}


.expliText {
    font-size: 14pt;
    padding-left: 40px;
    padding-right: 20px;
    text-align: justify;
    flex: 1;
    transform: scale(1);
    transition: 0.5s;
}

.EtapeExpli {
    display: flex;
    align-items: center;

}


.btOkEtapeLigne:first-child {
    transform: rotate(45deg);
    top: 60%;
    left: 18%;
    width: 30%;
}

.btOkEtapeLigne:last-child {
    transform: rotate(-60deg);
    top: 40%;
    left: 27%;
    width: 60%;
}

.EtapeExpliHidden .expliText {
    transform: scale(0);

}
.EtapeExpliHidden .btOkEtape {
    pointer-events: none;
    opacity: 0;
}
.EtapeExpliHidden .slider {
    pointer-events: none;
    opacity: 0;
}

.EtapeExpliHidden .btOkEtape .btOkEtapeLigne {
    transform: rotate(0);
    opacity: 0;
}