body {
    background-color: black;
}

.fs-image {
    position: absolute;
    z-index: 0;
    width: 100vw;
    height: calc(100vh - 8px);
    background-position: center;
    background-size: cover;
}

.fs-image .sombre {
    opacity: .3;
}

#objectifs .sombre {
    opacity: .4;
}

.sombre {
    position: absolute;
    opacity: .5;
}

.menu a,
.menu-mobile a {
    color: #eee;
}

.contenant {
    background: #000000dd;
    border-radius: 35px;
    text-align: center;
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.contenant p {
    color: white;
}

.menu a:hover {
    color: #bbb;
    border-bottom: thin solid #bbb;
}

.logo-opera-de-poche {
    z-index: 3;
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    height: 45%;
}

.resume {
    position: absolute;
    top: 60%;
    text-align: center;
    left: 50%;
    max-width: 840px;
    width: 50%;
    transform: translateX(-50%);
    z-index: 3;
}

.resume p {
    color: white;
}

.para-2, .para-3 {
    width: 100%;
    position: absolute;
    background-size: cover;
    height: 100vh;
    background-position: center;
}

#genese, #objectifs, .phase {
    border-top: 8px solid #dedede;
}

.para-2 {
    top: 100vh;
}

.para-3 {
    top: 200vh;
    background-image: linear-gradient(-40deg, #222, #111);
}

.para-3 .contenant{
    position: relative;
    transform: translate(0px,0px);
    border-radius: 0;
    top:0;
    left: 0;
    width: calc(100vw - 300px);
    margin: 0 auto;
    background-color: transparent;
}

.suite {
    z-index: 3;
    position: absolute;
    color: #eee;
    font-size: 3em;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    transition: .4s;
    cursor: pointer;
}

.suite:hover {
    transform: translateX(-50%) scale(1.1);
}

.phases {
    position: absolute;
    width: calc(100% - 8px);
    top: calc(300vh + 8px);
    background-color: black;
    height: calc(100vh - 16px);
    max-height: calc(45vw - 16px);
}

.phase {
    position: absolute;
    background-size: cover;
    width: 50%;
    height: 100%;
    background-image: linear-gradient(40deg, darkcyan, darkslategray);
    border: 5px solid white
}

.phase:nth-child(even) {
    left: 50%;
    background-image: linear-gradient(-40deg, darkcyan, darkslategrey)
}

.phase-titre {
    position: absolute;
    top: 5%;
    z-index: 2;
    left: 50%;
    transform: translateX(-50%);
}

.phase-titre a {
    color: white;
    text-decoration: none;
}

.phase-description {
    position: absolute;
    z-index: 2;
    top: 50%;
    width: calc(100% - 200px);  /* 100px on each side */
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.phase-description p {
    color: white;
    text-align: center;
}

.phase img {
    position: absolute;
    height: 50%;
    width: auto;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%)
}

.partenaires {
    position: absolute;
    top: calc(300vh + 45vw);
    background-color: #eee;
}

aside {
    position: fixed;
    right: 30px;
    z-index: 2;
    top: 50%;
    transform: translateY(-50%);
    transition: .3s
}

aside ul {
    list-style: none;
    padding: 0;
}

li h3 {
    margin: .2em 0;
}

li a {
    color: #eee;
    text-decoration: none;
    transition: .3s;
    padding: 2px 0;
    border-bottom: thin solid transparent;
}

li a:hover {
    border-bottom: thin solid #eee;
}

.phase .sombre {
    transition: .4s ease;
}

.phase .sombre:hover {
    background-color: blue;
}

.phase .sombre:active {
    background-color: black;
}


@media screen and (max-width: 1100px) {
    .para-3 .contenant{
        position: relative;
        transform: translate(0px,0px);
        border-radius: 0;
        top:0;
        left: 0;
        margin: 0 auto;
        background-color: transparent;
    }

    .phase-description {
        position: absolute;
        z-index: 2;
        top:50%;
        width: 80%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    /* Hide the sidebar menu on lower resolutions, otherwise it renders on top of the text */
    aside {
        display: none;
    }
}

@media screen and (max-width: 600px) {
    .logo-opera-de-poche {
        width: 100%;
        height: auto;
        top: 150px;
    }

    /* Hide the sidebar menu on lower resolutions, otherwise it renders on top of the text */
    aside {
        display: none;
    }

    .fs-image {
        height: 645px;
    }

    .resume {
        width: 80%;
        top: 250px;
    }

    .contenant {
        width: 90%;
        top: 20px;
        transform: translateX(-50%)
    }

    .para-2 {
        top: 645px;
        height: 820px;
    }

    .para-3 {
        top: 1465px;
        height: 830px;
    }

    .phases {
        top: 2295px;
    }

    .phase {
        width: 100%;
        left: 0;
        height: 600px;
    }

    .phase:nth-child(even) {
        top: 600px;
        left: 0;
    }

    .phase-titre {
        top: 10px;
    }

    /* Ensure the SVG fully covers the phase */
    .phase-bg {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 0;
    }
    
    .partenaires {
        top: 3495px;
    }

    .suite {
        display: none;
    }
}