body {
    background: var(--darkBlue);
    transition: background 0.5s ease;
    &.lock-scroll {
        overflow: hidden;
    }
    &.light {
        background-color: #fff;
        position: relative;

    }
    &.light::after {
        content: "";
        position: absolute;
        inset: 0;
        background-image: url('../../assets/noise.png');
        background-repeat: repeat;
        opacity: 1;
        pointer-events: none;
    }
}



/* Main */
main {
    width: 100vw;
    position: relative;
    z-index: 1;

    section {
        width: 100%;
        position: relative;
    }


    /* ##################### SECTION 1 - HERO ####################### */
    section.hero-wrapper {
        position: relative;
        width: 100vw;
        height: 200vh;
        display: flex;
        .hero {
            width: 100vw;
            height: 100vh;
            /* clipPath */
            clip-path: circle(0% at 50% 50%);
            transition: all 1s ease-in-out 0s;
            position: sticky;
            top: 0;

            &.open {
                animation: animOpener 1s ease forwards;
            }

            &.clipped {
                animation: clipHero 1s ease forwards;
            }

            &.original {
                animation: clipHeroReverse 1s ease forwards;
            }

            .clipClass {
                clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 10% 100%);

                &.reveal {
                    transition: clip-path 1s ease-in-out;
                    clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%);
                }

                &.no-transition {
                    transition: none;
                }
            }

            .hero-1 {
                position: absolute;
                top: 0;
                left: 0;
                z-index: 2;
                width: 100%;
                height: 100%;
                background-image: url('../../assets/hero-bg-1.jpg');
                background-repeat: no-repeat;
                background-size: cover;
                background-position: left center;

                .jc {
                    display: flex;
                    height: 55vh;
                    position: absolute;
                    z-index: 4;
                    bottom: 0;
                    left: calc(50% - 30%);
                    transition: transform 0.6s ease;
                    will-change: transform;

                    img {
                        height: 100%;
                        position: relative;
                        z-index: 2;
                    }

                    .comic-bubble {
                        position: absolute;
                        z-index: 1;
                        font-family: 'anime_ace_2.0_bbregular', sans-serif;
                        color: #000;

                        &.comic-2 {
                            background: url('../../assets/bubble2_gray.webp') no-repeat right center;
                            background-size: cover;
                            width: 35vw;
                            display: flex;
                            height: calc(35vw / 1.91);
                            align-items: flex-start;
                            justify-content: flex-end;
                            right: -29vw;
                            top: -15vh;
                            transform: scale(0);
                            transition: all .1s ease-in-out 1.5s;

                            &.on {
                                transform: scale(.8);
                            }

                            .bubble-container {
                                display: flex;
                                text-align: center;
                                width: 88%;
                                padding: 9% 2em;
                                font-size: 1.7vw;
                                line-height: 2.2vw;
                                justify-content: center;
                                flex-wrap: wrap;

                                span:nth-child(1) {
                                    font-family: 'anime_ace_2.0_bbbold', sans-serif;
                                    font-size: 1.7em;
                                    margin-bottom: .3em;
                                }

                                span:nth-child(2) {
                                    display: inline;

                                    strong {
                                        font-family: 'anime_ace_2.0_bbbold', sans-serif;
                                        font-size: 1.2em;
                                    }
                                }
                            }
                        }
                    }
                }

                .comic-bubble {
                    position: absolute;
                    z-index: 3;
                    font-family: 'anime_ace_2.0_bbregular', sans-serif;
                    color: #000;

                    &.comic-1 {
                        background: url('../../assets/bubble1_gray.webp') no-repeat right center;
                        background-size: cover;
                        width: 27vw;
                        display: flex;
                        height: calc(27vw / 2.61); /* Bubble ratio */
                        align-items: flex-start;
                        justify-content: flex-end;
                        left: 7vw;
                        top: 9vh;
                        transform: scale(0);
                        transition: all .1s ease-in-out 1s;

                        &.on {
                            transform: scale(.9);
                        }

                        .bubble-container {
                            display: flex;
                            text-align: center;
                            width: 73%;
                            padding: 7% 1em;
                            font-size: 1vw;
                            line-height: 1.5vw;
                            justify-content: center;
                        }
                    }

                    &.comic-3 {
                        background: url('../../assets/bubble3_gray.webp') no-repeat right center;
                        background-size: cover;
                        width: 25vw;
                        display: flex;
                        height: calc(25vw / 3.89);
                        justify-content: flex-start;
                        right: -4vw;
                        top: 50vh;
                        align-items: flex-end;
                        transform: scale(0);
                        transition: all .1s ease-in-out 1.8s;

                        &.on {
                            transform: scale(.9);
                        }

                        .bubble-container {
                            display: flex;
                            text-align: center;
                            width: 43%;
                            padding: 6% 1.2em;
                            font-size: .8vw;
                            line-height: 1.5vw;
                            justify-content: center;
                        }
                    }
                }
            }

            .hero-2 {
                position: absolute;
                top: 0;
                left: 0;
                z-index: 1;
                width: 100%;
                height: 100%;
                background-image: url('../../assets/hero-bg-2.jpg');
                background-repeat: no-repeat;
                background-size: cover;
                background-position: left center;

                .jc {
                    display: flex;
                    height: 60vh;
                    position: absolute;
                    z-index: 4;
                    bottom: 0;
                    left: calc(50% - 15%);
                    transition: transform 0.6s ease;
                    will-change: transform;

                    img {
                        height: 100%;
                        position: absolute;
                        z-index: 2;
                        opacity: 0;
                        transition: opacity .3s ease-in-out 0s;

                        &.jc1 {
                            left: 0;

                            &.on {
                                opacity: 1;
                            }
                        }

                        &.jc2 {
                            left: 10%;

                            &.on {
                                opacity: 1;
                            }
                        }
                    }

                    .comic-bubble {
                        position: absolute;
                        z-index: 1;
                        font-family: 'anime_ace_2.0_bbregular', sans-serif;
                        color: #000;

                        &.comic-2 {
                            position: relative;
                            background: url('../../assets/bubble2.webp') no-repeat right center;
                            background-size: cover;
                            width: 35vw;
                            display: flex;
                            height: calc(35vw / 1.91);
                            align-items: flex-start;
                            justify-content: flex-end;
                            left: 25vw;
                            top: -15vh;
                            transform: scale(.8);

                            .bubble-container {
                                display: flex;
                                text-align: center;
                                width: 88%;
                                padding: 9% 2em;
                                font-size: 1.5vw;
                                line-height: 2.1vw;
                                justify-content: center;
                                flex-wrap: wrap;

                                span:nth-child(1) {
                                    font-family: 'anime_ace_2.0_bbbold', sans-serif;
                                    font-size: 1.7em;
                                    margin-bottom: .3em;
                                }

                                h1 {
                                    margin: 0;
                                    display: inline;
                                    font-weight: 400;
                                    font-size: 1em;
                                    font-family: 'anime_ace_2.0_bbregular', sans-serif;
                                }
                            }
                        }
                    }
                }

                .comic-bubble {
                    position: absolute;
                    z-index: 3;
                    font-family: 'anime_ace_2.0_bbregular', sans-serif;
                    color: #000;

                    &.comic-1 {
                        background: url('../../assets/bubble1.webp') no-repeat right center;
                        background-size: cover;
                        width: 24vw;
                        display: flex;
                        height: calc(24vw / 2.61); /* Bubble ratio */
                        align-items: flex-start;
                        justify-content: flex-end;
                        left: 7vw;
                        top: 9vh;
                        transform: scale(.9);

                        .bubble-container {
                            display: flex;
                            text-align: center;
                            width: 63%;
                            padding: 9% 2em;
                            font-size: 1vw;
                            line-height: 1.5vw;
                            justify-content: center;
                        }
                    }

                    &.comic-4 {
                        background: url('../../assets/bubble4.webp') no-repeat right center;
                        background-size: cover;
                        width: 22vw;
                        display: flex;
                        height: calc(22vw / 2.49);
                        justify-content: flex-end;
                        left: 11vw;
                        top: 19vh;
                        transform: scale(.9);
                        align-items: flex-start;

                        .bubble-container {
                            display: flex;
                            text-align: center;
                            width: 73%;
                            padding: 9% 2em;
                            font-size: 1vw;
                            line-height: 1.3vw;
                            justify-content: center;
                        }
                    }

                    &.comic-5 {
                        background: url('../../assets/bubble5.webp') no-repeat right center;
                        background-size: cover;
                        width: 20vw;
                        display: flex;
                        height: calc(20vw / 3.19);
                        justify-content: flex-end;
                        left: 18vw;
                        top: 58vh;
                        transform: scale(.9);
                        align-items: flex-start;

                        .bubble-container {
                            display: flex;
                            text-align: center;
                            width: 49%;
                            padding: 10% 2em;
                            font-size: .8vw;
                            line-height: 1.1vw;
                            justify-content: center;
                        }
                    }
                }
            }

            .scene {
                overflow: hidden;
                .pys-logo-container {
                    display: flex;
                    justify-content: center;
                    z-index: 1;

                    .pys {
                        display: flex;
                        justify-content: flex-start;
                        flex-wrap: wrap;
                        font-family: "Lobster", sans-serif;
                        font-size: 3em;
                        margin: 19vh 0 0 0;
                        transform: rotate(-4deg);
                        position: relative;
                        width: 30%;

                        div {
                            display: flex;
                            position: absolute;

                            &.pimp {
                                z-index: 1;
                                font-size: 12vw;
                            }

                            &.your {
                                z-index: 2;
                                font-size: 4vw;
                                top: 5vw;
                                left: -3vw;
                                letter-spacing: .03em;
                            }

                            &.skills {
                                z-index: 3;
                                font-size: 12vw;
                                top: 7.5vw;
                                left: 5vw;

                            }
                        }

                        .letter {
                            display: inline-block;
                            transform: scale(1);
                            animation: popIn 0.4s forwards;
                        }
                    }
                }

                &.hero-1 {
                    .pys-logo-container {
                        .pys {
                            color: #949494;
                            text-shadow: -3px -3px 0 #1d2531,
                            3px -3px 0 #1d2531,
                            -3px 3px 0 #1d2531,
                            3px 3px 0 #1d2531,
                            -7px 8px 0 #1d2531;
                        }
                    }
                }

                &.hero-2 {
                    .pys-logo-container {
                        .pys {
                            color: var(--yellow);
                            text-shadow: -3px -3px 0 #000,
                            3px -3px 0 #000,
                            -3px 3px 0 #000,
                            3px 3px 0 #000,
                            -7px 8px 0 #000;
                        }
                    }
                }
            }

            .sep {
                height: 100%;
                width: 1px;
                background: white;
                position: absolute;
                top: 0;
                left: 10%;
                z-index: 5;
                cursor: grab;

                .circle {
                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                    width: 6vw;
                    height: 6vw;
                    background: #000;
                    border-radius: 50%;
                    position: absolute;
                    left: -3vw;
                    top: calc(50% - 3vw);

                    svg.lucide-play-icon {
                        fill: white;

                        &.reverse {
                            transform: rotate(180deg);
                        }
                    }
                }

                &.reveal {
                    transition: left 1s ease-in-out;
                    left: calc(100% - 2px);
                }

                &.no-transition {
                    transition: none;
                }

                &.on {
                    opacity: 1;
                }
            }

            /* CTA */

            .cta-primary.discover {
                position: absolute;
                z-index: 11;
                right: 6vw;
                bottom: 10vh;
                transition: all 0.2s ease-in-out 0s;

                &.before {
                    background: #949494;
                    opacity: 0;
                    &.on {
                        opacity: 1;
                    }
                }

                &.after {
                    opacity: 0;
                    &.on {
                        opacity: 1;
                    }
                }
            }

            /* GRADIENT */

            .hero-gradient {
                width: 100%;
                height: 200vh;
                position: absolute;
                bottom: 0;
                left: 0;
                z-index: 10;
                background: var(--darkBlue);
                background: radial-gradient(circle, rgba(11, 21, 36, 0) 53%, rgba(11, 21, 36, 1) 77%);
            }
        }
    }


    /* ##################### SECTION 2 - EBBINGHAUS ####################### */
    section.ebbinghaus {
        height: 200vh;
        display: flex;
        justify-content: center;
        align-items: flex-start;

        .graph-container {
            position: sticky;
            top: 0;
            height: 100vh;
            width: 100vw;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            align-content: center;
            overflow: hidden;

            .glow {
                position: absolute;
                z-index: 1;
                width: 100vw;
                height: 100vh;
                background: radial-gradient(52% 49% at 11% 52%, rgb(0 255 248 / 10%), transparent);
                opacity: 0;
                transition: opacity 1s ease;
                &.visible {
                    opacity: 1;
                }
            }

            h2 {
                display: block;
                margin: 12vh 0 .5em 0;
                font-size: 2.5rem;
                font-weight: 700;
                opacity: 0;
                transition: opacity 0.5s ease;
                &.visible {
                    opacity: 1;
                }
            }
            h3 {
                display: block;
                width: 100%;
                text-align: center;
                margin: 0;
                font-size: 1.5em;
                font-style: italic;
                font-weight: 6400;
                color: var(--yellow);
                opacity: 0;
                transition: opacity 0.5s ease;
                &.visible {
                    opacity: 1;
                }
            }

            #graph {
                width: 100%;
                height: auto;
                position: relative;
                z-index: 2;
                .forgetting-curve, .doing-curve {
                    stroke-dasharray: 1000; /* Valeur à ajuster dynamiquement */
                    stroke-dashoffset: 1000;
                    transition: stroke-dashoffset 0.1s linear;
                }
                line {
                    stroke-dasharray: 2000;
                    stroke-dashoffset: 2000;
                    transition: stroke-dashoffset 0.1s linear;
                }
            }

            .label-listening {
                position: absolute;
                z-index: 2;
                transform: translate(10px, -20px);
                transition: all 0.1s linear;
                opacity: 0;
                font-size: 1em;
                padding: .7em 1em;
                border-radius: .7em;
                color: rgb(255 114 114);
                background: var(--darkBlue);
                border: 1px solid rgb(255 114 114 / 40%);
                &.visible {
                    opacity: 1;
                }
            }
            .label-forgetting {
                position: absolute;
                z-index: 2;
                transform: translate(10px, -20px);
                transition: all 0.1s linear;
                opacity: 0;
                font-size: 1em;
                padding: .7em 1em;
                border-radius: .7em;
                color: rgb(255 114 114);
                background: var(--darkBlue);
                border: 1px solid rgb(255 114 114 / 40%);
                &.visible {
                    opacity: 1;
                }
            }
            .label-sad {
                position: absolute;
                z-index: 2;
                transform: translate(10px, -20px);
                transition: all 0.1s linear;
                opacity: 0;
                font-size: 1em;
                padding: .7em 1em;
                border-radius: .7em;
                color: rgb(255 114 114);
                background: var(--darkBlue);
                border: 1px solid rgb(255 114 114 / 40%);
                &.visible {
                    opacity: 1;
                }
            }
            .label-doing {
                position: absolute;
                z-index: 2;
                transform: translate(10px, -20px);
                transition: all 0.1s linear;
                opacity: 0;
                font-size: 1em;
                padding: .7em 1em;
                border-radius: .7em;
                color: var(--yellow);
                border: 1px solid var(--yellow);
                &.visible {
                    opacity: 1;
                }
            }

            .label {
                position: absolute;
                z-index: 3;
                opacity: 0;
                transition: opacity 0.5s ease;
                pointer-events: none;
                background: var(--yellow);
                color: #000;
                font-size: 1em;
                padding: .7em 1em;
                font-weight: 600;
                border-radius: .5em;
                display: flex;
                flex-wrap: wrap;
                flex-direction: column;
                align-items: center;
                &.visible {
                    opacity: 1;
                }
            }

            .explanation {
                width: 35vw;
                position: absolute;
                right: 5vw;
                top: 50%;
                z-index: 4;
                opacity: 0;
                transition: opacity 0.5s ease;
                &.visible {
                    opacity: 1;
                }
                .cta-container {
                    margin: 2em 0 0 0;
                }
            }
        }
    }


    /* ##################### SECTION 3 - BRAIN PRACTICE ####################### */
    section.brain-practice {
        position: relative;
        width: 100vw;
        height: 200vh;
        display: flex;

        .brain-practice-wrapper {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100vw;
            height: 100vh;
            position: sticky;
            top: 0;
            overflow: hidden;
            .glow {
                position: absolute;
                z-index: 1;
                width: 100vw;
                height: 100vh;
                background: radial-gradient(46% 38% at 75% 41%, rgb(0 255 248 / 12%), transparent);
                opacity: 0;
                transition: opacity 1s ease;
                &.visible {
                    opacity: 1;
                }
            }
            .content {
                width: 80%;
                display: flex;
                align-items: center;
                gap: 1em;
                position: relative;
                z-index: 2;
                .explain {
                    display: flex;
                    flex-wrap: wrap;
                    gap: 1em;
                    width: 55%;
                    h2 {
                        font-size: 2.5rem;
                        line-height: 1.1em;
                        font-weight: 700;
                        span {
                            display: block;
                        }
                    }
                    p {
                        width: 70%;
                        strong {
                            font-weight: 600;
                            color: var(--yellow);
                        }
                    }
                    .cta-container {
                        margin-top: 0;
                        width: 100%;
                    }
                ;
                }
                .brain {
                    width: 45%;
                    .brain-container {
                        position: relative;
                        height: 60vh;
                        img {
                            position: absolute;
                            height: 100%;
                            top: 0;
                            left: 0;
                            &.brain1 {
                                z-index: 1;
                            }
                        }
                        .illuminate {
                            position: absolute;
                            height: 100%;
                            width: 100%;
                            top: 0;
                            left: 0;
                            z-index: 2;
                            clip-path: circle(0% at 30% 100%);
                            img {
                                position: absolute;
                                height: 100%;
                                top: 0;
                                left: 0;
                            }
                        }
                    }
                }
            }
            .svg-line-container {
                position: absolute;
                left: 0;
                z-index: 3;
                svg {
                    width: 100%;
                    path {
                        fill: none;
                        fill-rule: evenodd;
                        stroke: var(--yellow);
                        stroke-linecap: round;
                        stroke-miterlimit: 8;
                        vector-effect: non-scaling-stroke;
                        stroke-width: 8px;
                        stroke-dasharray: 1000; /* Valeur à ajuster dynamiquement */
                        stroke-dashoffset: 1000;
                        transition: stroke-dashoffset 0.1s linear;
                    }
                }
            }
        }
    }


    /* ##################### SECTION 4 - WEB APP ####################### */
    section.webapp {
        position: relative;
        width: 100vw;
        height: 200vh;
        display: flex;
        .webapp-wrapper {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100vw;
            height: 100vh;
            position: sticky;
            top: 0;
            .glow {
                position: absolute;
                z-index: 1;
                width: 100vw;
                height: 100vh;
                background: radial-gradient(32% 38% at 63% 44%, rgb(0 255 248 / 12%), transparent);
                opacity: 0;
                transition: opacity 1s ease;
                &.visible {
                    opacity: 1;
                }
            }
            .phone-container {
                position: relative;
                z-index: 3;
                width: 100vw;
                height: 100vh;
                /* display: none; */ /* TEMP*/
                canvas {
                    position: relative;
                    z-index: 1;
                    display: block;
                    width: 100vw;
                    height: 100vh;
                    pointer-events: none;
                }
            }
            .linear-gradient {
                display: block;
                position: absolute;
                bottom: 0;
                left: 0;
                z-index: 3;
                height: 50vh;
                width: 100vw;
                background: linear-gradient(0deg,rgba(12, 21, 36, 1) 0%, rgba(12, 21, 36, 0) 100%);
            }
            .baselines {
                position: absolute;
                top: 0;
                left: 0;
                z-index: 2;
                display: flex;
                width: 100vw;
                height: 100vh;
                align-items: center;
                justify-content: center;
                flex-wrap: wrap;
                align-content: center;
                .secs {
                    display: flex;
                    width: 100%;
                    height: auto;
                    justify-content: center;
                    align-items: flex-start;
                    .sec {
                        position: relative;
                        display: flex;
                        width: 50%;
                        height: 100%;
                        overflow: hidden;
                        flex-wrap: wrap;
                        align-content: flex-start;
                        padding-bottom: 1.5rem;
                        h2 {
                            position: relative;
                            display: flex;
                            flex-wrap: wrap;
                            font-size: 3em;
                            line-height: 1em;
                            font-weight: 700;
                            justify-content: center;
                            span {
                                display: block;
                                width: 100%;
                            }
                        }
                        &.left-sec {
                            justify-content: flex-end;
                            h2 {
                                right: -25vw;
                                transition: right 0.5s ease;
                                span {
                                    text-align: right;
                                }
                                &.visible {
                                    right: 15vw;
                                }
                            }
                        }
                        &.right-sec {
                            justify-content: flex-start;
                            h2 {
                                left: -40vw;
                                transition: left 0.5s ease;
                                margin-bottom: 1em;
                                span:nth-child(1) {
                                    font-size: .7em;
                                }
                                span:nth-child(2) {
                                    font-size: 1.8em;
                                    color: var(--yellow);
                                }
                                &.visible {
                                    left: 10vw;
                                }
                            }
                            .explain {
                                position: relative;
                                left: -30vw;
                                transition: left 0.5s ease .5s;
                                display: flex;
                                flex-wrap: wrap;
                                p {
                                    margin: 0 0 2rem .5rem;
                                    width: 50%;
                                    strong {
                                        font-weight: 600;
                                        color: var(--yellow);
                                    }
                                }
                                .cta-container {
                                    width: 100%;
                                    margin: 0 0 0 .5rem;
                                }
                                &.visible {
                                    left: 10vw;
                                }
                            }
                        }
                    }
                }
            }
        }
    }


    /* ##################### SECTION 5 - JCVD ####################### */
    section.jcvd {
        position: relative;
        width: 100vw;
        height: 100vh;
        display: flex;
        .jcvd-wrapper {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100vw;
            height: 100vh;
            position: sticky;
            top: 0;
            flex-wrap: wrap;
            align-content: center;
            gap: 5vh;
            .citation {
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-wrap: wrap;
                position: relative;
                z-index:2 ;
                h3 {
                    display: flex;
                    flex-wrap: wrap;
                    width: 100%;
                    line-height: 6em;
                    letter-spacing: -.04em;
                    margin: 0;
                    position: relative;
                    span {
                        display: block;
                        width: 100%;
                        text-align: center;
                        position: relative;
                        &:nth-child(1) {
                            font-size: 5rem;
                        }
                        &:nth-child(2) {
                            color: var(--yellow);
                            font-size: 8rem;
                            font-weight: 700;
                        }
                        &:nth-child(3) {
                            font-size: 5rem;
                        }
                        &.reveal-on-scroll {
                            opacity: 0;
                            transform: translateY(30px);
                            transition: opacity 0.8s ease, transform 0.8s ease;
                        }
                        &.revealed {
                            opacity: 1;
                            transform: translateY(0);
                        }
                    }
                }
            }
            .who {
                width: 100%;
                display: flex;
                justify-content: center;
                opacity: 0;
                transition: opacity 0.5s ease;
                position: relative;
                z-index:2 ;
                .who-container {
                    width: 70%;
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: flex-end;
                    gap: .5rem;
                    span {
                        display: block;
                        width: 100%;
                        text-align: right;
                        &:nth-child(1) {
                            font-size: 2rem;
                            font-style: italic;
                            font-weight: 500;
                        }
                        &:nth-child(2) {
                            opacity: .5;
                        }
                    }
                }
                &.visible {
                    opacity: 1;
                }
            }
            .cta-container {
                width: 100%;
                display: flex;
                justify-content: center;
                position: relative;
                z-index:2 ;
                a.cta-primary {
                    span {
                        font-size: 2em;
                    }
                }
            }
            .glow {
                position: absolute;
                z-index: 1;
                width: 100vw;
                height: 100vh;
                background: radial-gradient(52% 49% at 11% 52%, rgb(0 255 248 / 10%), transparent);
                opacity: 1;
                transition: opacity 1s ease;
            }
        }
    }


    /* ##################### SECTION 6 - MINI TEST ####################### */
    section.mini-test {
        position: relative;
        width: 100vw;
        height: 200vh;
        display: flex;
        .mini-test-wrapper {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100vw;
            height: 100vh;
            position: sticky;
            top: 0;
            flex-wrap: wrap;
            align-content: center;
            color: var(--darkBlue);
            .content {
                position: relative;
                z-index: 2;
                width: 75%;
                height: 100vh;
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                align-content: center;
                h2 {
                    font-size: 2.2rem;
                    font-weight: 800;
                    margin: 0 0 3rem 0;
                    display: block;
                    width: 100%;
                    text-align: center;
                }
                h3 {
                    display: block;
                    width: 100%;
                    text-align: center;
                    margin: 0 0 2rem 0;
                    font-size: 3em;
                    line-height: 1em;
                    font-weight: 800;
                    letter-spacing: -.03em;
                    span {
                        text-decoration: underline;
                    }
                    strong {
                        font-weight: 800;
                        color: black;
                    }
                }
                .question-container {
                    display: flex;
                    flex-wrap: wrap;
                    width: 100%;
                    gap: 1.5rem;
                    justify-content: center;
                    .rules {
                        width: 100%;
                        text-align: center;
                        margin-bottom: 2rem;
                        font-style: italic;
                        font-size: 1.1em;
                        font-weight: 600;
                    }
                    .item {
                        width: calc(50% - 2rem);
                        display: flex;
                        justify-content: center;
                        span.q {
                            cursor: pointer;
                            padding: 2rem 3rem;
                            border-radius: 3rem;
                            font-size: 1.2rem;
                            font-weight: 600;
                            display: flex;
                            align-items: center;
                            background: #c7d0e0;
                            position: relative;
                            transition: all 0.5s ease;
                            &:hover {
                                background: var(--yellow);
                                box-shadow: 0 0 2px 2px #ffffff, 0 0 17px 11px #ffffff61;
                            }
                            span.chosen {
                                position: absolute;
                                display: flex;
                                height: 35px;
                                width: 35px;
                                top: -.7rem;
                                left: -.7rem;
                                background: #39c86e;
                                color: #fff;
                                border-radius: 50%;
                                justify-content: center;
                                align-items: center;
                                opacity: 0;
                            }
                            &.checked {
                                background: #c4f7d7;
                                border-color: #39c86e;
                                span.chosen {
                                    opacity: 1;
                                }
                            }
                        }
                    }
                }
            }
            .result-container {
                position: fixed;
                top: 0;
                left: 0;
                z-index: 1;
                width: 0;
                height: 0;
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                background: rgba(255,255,255,.9);
                font-size: 3.5rem;
                align-content: center;
                justify-content: center;
                opacity: 0;
                transition: opacity 0.5s ease;
                font-weight: 700;
                div.good {
                    display: none;
                }
                div.bad {
                    display: none;
                }
                div.rule {
                    display: none;
                }
                span {
                    display: block;
                    text-align: center;
                    width: 100%;
                    line-height: 1.5em;
                    &:nth-child(2) {
                        font-size: .5em;
                        line-height: 1.1em;
                    }
                }
                &.visible {
                    width: 100%;
                    height: 100%;
                    z-index: 3;
                    opacity: 1;
                }
                &.good {
                    div.good {
                        display: block;
                    }
                }
                &.bad {
                    div.bad {
                        display: block;
                    }
                }
                &.rule {
                    div.rule {
                        display: block;
                    }
                }
                .fireworks, .fireworks2 {
                    position: absolute;
                    &.fireworks {
                        width: 20vw;
                        height: 20vw;
                        right: 15%;
                        top: 15%;
                    }
                    &.fireworks2 {
                        width: 15vw;
                        height: 15vw;
                        left: 10%;
                        top: 30%;
                    }
                    img {
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        transform: scale(0);
                        opacity: 0;

                    }
                    &.on {
                        .fw1 {
                            animation: explode 1.1s ease-out forwards;
                            animation-delay: 0s;
                        }
                        .fw2 {
                            animation: explode 1.3s ease-out forwards;
                            animation-delay: 0.4s;
                        }
                        .fw3 {
                            animation: explode .6s ease-out forwards;
                            animation-delay: 0.5s;
                        }
                    }
                }
            }
            .glow {
                position: absolute;
                z-index: 1;
                width: 100vw;
                height: 100vh;
                background: radial-gradient(50% 50% at 50% 50%, rgb(255 255 255 / 20%), transparent),
                radial-gradient(30% 30% at 50% 50%, rgb(255 255 255 / 10%), transparent),
                radial-gradient(20% 20% at 50% 50%, rgb(255 255 255 / 3%), transparent);
                opacity: 0;
                transition: opacity 2s ease;
                &.visible {
                    opacity: 1;
                }
            }
        }
    }


    /* ##################### SECTION 7 - KPIS ####################### */
    section.kpis {
        position: relative;
        width: 100vw;
        height: 400vh;
        display: flex;

        .kpis-wrapper {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100vw;
            height: 100vh;
            position: sticky;
            top: 0;
            flex-wrap: wrap;
            align-content: center;
            overflow: hidden;
            gap: 1.5rem;
            padding-top: 3vh;
            .line {
                width: auto;
                display: flex;
                flex-wrap: nowrap;
                height: 30%;
                gap: 1.5rem;
                position: relative;
                transition: transform 0.3s ease-out, opacity 0.3s ease-out; /* optionnel si tu veux du lissage */
                will-change: transform, opacity;
                .item {
                    display: flex;
                    width: 30vw;
                    height: calc(100% - 2.8rem);
                    background: gray;
                    gap: 1.5rem;
                    padding: 1.5rem;
                    border-radius: 1rem;
                    &.kpi {
                        flex-wrap: wrap;
                        align-content: space-between;
                        background: #152034;
                        .figure {
                            width: 100%;
                            font-size: 6.5rem;
                            line-height: .7em;
                            color: var(--yellow);
                            display: flex;
                            font-weight: 500;
                            align-items: flex-start;
                            letter-spacing: -.05em;
                            sub {
                                font-size: .4em;
                                position: relative;
                                top: .5em;
                                letter-spacing: normal;
                            }
                        }
                        .explain-figure {
                            width: 100%;
                            font-size: 1.1rem;
                            line-height: 1.4em;
                            opacity: .5;
                            color: var(--main-text-color);
                        }
                        &.reverse {
                            .figure {
                                order: 2;
                                color: var(--main-text-color);
                            }
                            .explain-figure {
                                order: 1;
                            }
                        }
                    }
                    &.logo {
                        justify-content: center;
                        align-items: center;
                        background: #fff;
                        &.cma {
                            img, svg {
                                height: 45%;
                            }
                        }
                        &.naos {
                            img, svg {
                                height: 20%;
                            }
                        }
                        &.mercadier {
                            img, svg {
                                height: 60%;
                            }
                        }
                        &.crown {
                            img, svg {
                                height: 30%;
                            }
                        }
                    }
                    &.verbatim {
                        justify-content: center;
                        flex-wrap: wrap;
                        align-items: center;
                        align-content: space-between;
                        font-family: 'serif';
                        font-size: 3vh;
                        line-height: 1em;
                        font-style: italic;
                        background: #060b15;
                        color: #d6e1f3;
                        span {
                            display: block;
                            width: 100%;
                        }
                        .company {
                            display: block;
                            width: 100%;
                            text-align: right;
                            img {
                                height: 1.4rem;
                            }
                        }
                    }
                }
            }
        }
    }


    /* ##################### SECTION 8 FINALE ####################### */
    section.last {
        position: relative;
        width: 100vw;
        height: 40vh;
        display: flex;
        .last-wrapper {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            a.ctc {
                border-radius: 5rem;
                img {
                    width: 3rem;
                    height: 3rem;
                    border-radius: 50%;
                }
            }
        }
    }
}




/* KEYFRAMES FOR ANIMATIONS */
@keyframes animOpener {
    0% { clip-path: circle(0% at 50% 50%); }
    100% { clip-path: circle(100% at 50% 50%); }
}
@keyframes clipHero {
    0% { clip-path: circle(100% at 50% 50%) }
    100% { clip-path: circle(55% at 50% 0%) }
}
@keyframes clipHeroReverse {
    0% { clip-path: circle(55% at 50% 0%) }
    100% { clip-path: circle(100% at 50% 50%) }
}

@keyframes popIn {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
        text-shadow: 0 0 5px #fff, 0 0 10px #009dff, 0 0 15px #0059ff, 0 0 20px #0004ff;
    }
    100% {
        transform: scale(1);
    }
}
/* Animation de type "explosion" pour fireworks */
@keyframes explode {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    30% {
        opacity: .8;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
    80% {
        opacity: .6;
    }
    100% {
        transform: scale(1.3);
        opacity: 0;
    }
}


/* Responsive */

/* Small Laptops */
@media screen and (min-width: 1024px) and (max-width: 1366px) {
    main {
        section.ebbinghaus {
            .graph-container {
                h2 {
                    font-size: 2.5rem;
                }
                .explanation {
                    width: 35vw;
                }
            }
        }
        section.brain-practice {
            .brain-practice-wrapper {
                .content {
                    width: 90%;
                    .explain {
                        h2 {
                            font-size: 2.5rem;
                        }
                    }
                    .brain {
                        .brain-container {
                            img {
                                height: 115%;
                            }
                            .illuminate {
                                height: 115%;
                            }
                        }
                    }
                }
            }
        }
        section.jcvd {
            .jcvd-wrapper {
                .citation {
                    h3 {
                        line-height: 5em;
                        span {
                            &:nth-child(1) {
                                font-size: 4rem;
                            }
                            &:nth-child(2) {
                                font-size: 6rem;
                            }
                            &:nth-child(3) {
                                font-size: 4rem;
                            }
                        }
                    }
                }
            }
        }
        section.mini-test {
            .mini-test-wrapper {
                .content {
                    h2 {
                        font-size: 2rem;
                    }
                    h3 {
                        font-size: 3rem;
                    }
                    .question-container {
                        .item {
                            span.q {
                                padding: 1.5rem 2rem;
                                font-size: 1rem;
                            }
                        }
                    }
                }
            }
        }
    }
}

/* Styles spécifiques à l’iPad Pro paysage */
@media screen and (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) {
    .webapp-wrapper {
        .left-sec {
            h2.visible {
                right: 20vw !important;
            }
        }
        .right-sec {
            h2.visible {
                left: 12vw !important;
            }
            .explain.visible {
                left: 12vw !important;
            }
        }
    }
}
/* Styles spécifiques à l’iPad Pro portrait */
@media screen and (min-width: 1024px) and (max-width: 1366px) and (orientation: portrait) {
    main {
        section.hero-wrapper {
            .hero {
                .scene {
                    .pys-logo-container {
                        .pys {
                            width: 50vw;
                            margin: 15vh 0 0 0;
                            div {
                                &.pimp {
                                    font-size: 20vw;
                                }
                                &.your {
                                    font-size: 7vw;
                                    left: -4vw;
                                }
                                &.skills {
                                    font-size: 19vw;
                                    top: 11.5vw;
                                    left: 10vw;
                                }
                            }
                        }
                    }
                }
                .hero-1 {
                    .jc {
                        left: calc(50% - 71%);
                        height: 52vh;
                        .comic-bubble {
                            right: -18vw;
                            &.comic-2.on {
                                transform: scale(1.4);
                            }
                        }
                    }
                    .comic-bubble {
                        &.comic-1 {
                            left: 11vw;
                            top: 30vh;
                            &.on {
                                transform: scale(1.5);
                            }
                        }
                        &.comic-3 {
                            &.on {
                                transform: scale(1.7);
                            }
                        }
                    }
                }
                .hero-2 {
                    .jc {
                        height: 55vh;
                        left: calc(50% - 29%);
                        .comic-bubble {
                            left: 38vw !important;
                            &.comic-2 {
                                transform: scale(1.4);
                            }
                        }
                    }
                    .comic-bubble {
                        &.comic-1 {
                            left: 4vw;
                            top: 28vh;
                            transform: scale(1.5);
                        }
                        &.comic-4 {
                            left: 15vw;
                            top: 36vh;
                            transform: scale(1.4);
                        }
                        &.comic-5 {
                            left: 8vw;
                            top: 48vh;
                            transform: scale(1.4);
                        }
                    }
                }
                .hero-gradient {
                    bottom: -18vh;
                }
            }
        }
        section.ebbinghaus {
            .glow {
                display: none;
            }
            .graph-container {
                height: 50vh;
            }
        }
        section.webapp {
            .webapp-wrapper {
                .phone-container {
                    width: 75vw;
                    height: 75vh;
                }
                .baselines {
                    .secs {
                        .sec {
                            &.left-sec {
                                h2 {
                                    right: -25vw;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}


/* Styles spécifiques à l’iPad Mini portrait */
@media screen and (max-width: 1024px) and (orientation: portrait) {
    main {
        section.hero-wrapper {
            height: 200vh;
            .hero {
                .scene {
                    .pys-logo-container {
                        .pys {
                            width: 50vw;
                            margin: 15vh 0 0 0;

                            div {
                                &.pimp {
                                    font-size: 20vw;
                                }

                                &.your {
                                    font-size: 7vw;
                                    left: -4vw;
                                }

                                &.skills {
                                    font-size: 19vw;
                                    top: 11.5vw;
                                    left: 10vw;
                                }
                            }
                        }
                    }
                }

                .hero-1 {
                    .jc {
                        left: calc(50% - 71%);
                        height: 52vh;

                        .comic-bubble {
                            right: -18vw;

                            &.comic-2.on {
                                transform: scale(1.4);
                            }
                        }
                    }

                    .comic-bubble {
                        &.comic-1 {
                            left: 11vw;
                            top: 30vh;

                            &.on {
                                transform: scale(1.5);
                            }
                        }

                        &.comic-3 {
                            &.on {
                                transform: scale(1.7);
                            }
                        }
                    }
                }

                .hero-2 {
                    .jc {
                        height: 55vh;
                        left: calc(50% - 29%);

                        .comic-bubble {
                            left: 38vw !important;

                            &.comic-2 {
                                transform: scale(1.4);
                            }
                        }
                    }

                    .comic-bubble {
                        &.comic-1 {
                            left: 4vw;
                            top: 28vh;
                            transform: scale(1.5);
                        }

                        &.comic-4 {
                            left: 15vw;
                            top: 36vh;
                            transform: scale(1.4);
                        }

                        &.comic-5 {
                            left: 8vw;
                            top: 48vh;
                            transform: scale(1.4);
                        }
                    }
                }
                .sep {
                    &.on {
                        opacity: .3;
                    }
                }

                .hero-gradient {
                    bottom: -18vh;
                }
            }
        }
        section.ebbinghaus {
            .glow {
                display: none;
            }
            .graph-container {
                h2 {
                    margin: 0 0 1rem 0;
                }
                h3 {
                    margin: 0 0 10vh 0;
                }
                .explanation {
                    position: relative;
                    top: inherit;
                    right: inherit;
                    margin: 10vh 0 0 0;
                }
            }
        }
        section.brain-practice {
            .brain-practice-wrapper {
                .content {
                    width: 85%;
                    .explain {
                        width: 100%;
                        h2 {
                            margin: 0 0 5vh 0;
                        }
                        .cta-container {
                            margin: 0 0 20vh 0;
                        }
                    }
                }
            }
        }
        section.webapp {
            .webapp-wrapper {
                .phone-container {
                    position: absolute;
                    width: 80vw;
                    height: 80vh;
                    left: -30vw;
                }
                .baselines {
                    .secs {
                        flex-wrap: wrap;
                        .sec {
                            width: 100%;
                            &.left-sec {
                                h2 {
                                    right: -50vw;
                                    &.visible {
                                        right: 50vw;
                                    }
                                }
                            }
                            &.right-sec {
                                h2 {
                                    left: -80vw;
                                    &.visible {
                                        left: 34vw;
                                    }
                                }
                                .explain {
                                    left: -80vw;
                                    &.visible {
                                        left: 34vw;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
        section.jcvd {
            height: auto;
            margin: 10vh 0;
            .jcvd-wrapper {
                height: auto;
                .citation {
                    margin-top: 0;
                    h3 {
                        line-height: 5rem;
                        span {
                            &:nth-child(1) {
                                font-size: 3rem;
                            }
                            &:nth-child(2) {
                                font-size: 5rem;
                            }
                            &:nth-child(3) {
                                font-size: 3rem;
                            }
                        }
                    }
                }
            }
        }
        section.mini-test {
            .mini-test-wrapper {
                .content {
                    h3 {
                        font-size: 2.5rem;
                    }
                }
            }
        }
        section.kpis {
            .kpis-wrapper {
                gap: 0;
                .line {
                    gap: 1rem;
                    .item {
                        width: 50vw;
                        padding: 1rem;
                        &.verbatim {
                            span {
                                font-size: 2vh;
                            }
                        }
                    }
                }
            }
        }
    }

    @keyframes clipHero {
        0% { clip-path: circle(100% at 50% 50%) }
        100% { clip-path: circle(100% at 50% 50%) }
    }
    @keyframes clipHeroReverse {
        0% { clip-path: circle(100% at 50% 50%) }
        100% { clip-path: circle(100% at 50% 50%) }
    }
}



@media screen and (max-width: 768px) and (orientation: portrait) {
    main {
        section.hero-wrapper {
            height: 200vh;
            .hero {
                overflow: hidden;
                .scene {
                    .pys-logo-container {
                        .pys {
                            width: 50vw;
                            margin: 17vh 0 0 0;

                            div {
                                &.pimp {
                                    font-size: 26vw;
                                }

                                &.your {
                                    font-size: 9vw;
                                    left: -4vw;
                                    top: 4vh;
                                }

                                &.skills {
                                    font-size: 24vw;
                                    top: 17.5vw;
                                    left: 14vw;
                                }
                            }
                        }
                    }
                }

                .hero-1 {
                    .jc {
                        left: calc(50% - 93%);
                        height: 47vh;

                        .comic-bubble {
                            &.comic-2.on {
                                right: -6vw;
                                transform: scale(2);
                            }
                        }
                    }

                    .comic-bubble {
                        &.comic-1 {
                            left: 11vw;
                            top: 30vh;

                            &.on {
                                transform: scale(2);
                            }
                        }

                        &.comic-3 {
                            &.on {
                                transform: scale(2.2);
                            }
                        }
                    }
                }

                .hero-2 {
                    .jc {
                        height: 55vh;
                        left: calc(50% - 29%);

                        .comic-bubble {
                            left: 38vw !important;

                            &.comic-2 {
                                transform: scale(2);
                                top: -10vh;
                            }
                        }
                    }

                    .comic-bubble {
                        &.comic-1 {
                            left: 3vw;
                            top: 28vh;
                            transform: scale(2);
                        }

                        &.comic-4 {
                            left: 10vw;
                            top: 36vh;
                            transform: scale(2);
                        }

                        &.comic-5 {
                            left: 7vw;
                            top: 66vh;
                            transform: scale(2.2);
                        }
                    }
                }

                .cta-primary {
                    font-size: 1em;
                    &.large {
                        font-size: 1em;
                        padding: .5em 1em;
                    }
                }

                .hero-gradient {
                    bottom: -18vh;
                }
            }
        }
        section.ebbinghaus {
            height: 200vh;
            .glow {
                display: none;
            }
            .graph-container {
                #graph {
                    transform: scale(1.8);
                }
                h2 {
                    font-size: 1.7rem;
                    line-height: 1em;
                    text-align: center;
                    margin: 0 0 1rem 0;
                }
                h3 {
                    margin: 0 0 10vh 0;
                }
                .explanation {
                    position: relative;
                    top: inherit;
                    right: inherit;
                    margin: 17vh 0 0 0;
                    width: 100%;
                    padding: 0 2rem;
                    text-align: center;
                }
                .label-listening, .label-forgetting, .label-sad, .label-doing {
                    font-size: .8em;
                    padding: .5em .8em;
                }
                .label {
                    font-size: .7em;
                    padding: .3em .5em;
                }
            }
        }
        section.brain-practice {
            .brain-practice-wrapper {
                .content {
                    width: 85%;
                    .explain {
                        width: 100%;
                        h2 {
                            margin: 0 0 2vh 0;
                            font-size: 1.5rem;
                        }
                        p {
                            width: 80%;
                        }
                        .cta-container {
                            margin: 0 0 20vh 0;
                        }
                    }
                    .brain {
                        position: absolute;
                        right: -7vw;
                        bottom: -7vh;
                        .brain-container {
                            height: 35vh;
                        }
                    }
                }
                .svg-line-container {
                    svg {
                        path {
                            stroke-width: 4px;
                            vector-effect: non-scaling-stroke;
                        }
                    }
                }
            }
        }
        section.webapp {
            .webapp-wrapper {
                overflow: hidden;
                .glow {
                    width: 200vw;
                }
                .phone-container {
                    position: absolute;
                    width: 80vw;
                    height: 80vh;
                    left: -33vw;
                }
                .baselines {
                    .secs {
                        flex-wrap: wrap;
                        .sec {
                            width: 100%;
                            padding-bottom: 1rem;
                            &.left-sec {
                                h2 {
                                    font-size: 1.7rem;
                                    right: -70vw;
                                    &.visible {
                                        right: 10vw;
                                    }
                                    span {
                                        text-align: left;
                                    }
                                }
                            }
                            &.right-sec {
                                h2 {
                                    font-size: 1.7rem;
                                    left: -80vw;
                                    margin-bottom: 1rem;
                                    span:nth-child(2) {
                                        font-size: 1.5em;
                                    }
                                    &.visible {
                                        left: 30vw;
                                    }
                                }
                                .explain {
                                    left: -80vw;
                                    &.visible {
                                        left: 39vw;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
        section.jcvd {
            .jcvd-wrapper {
                .citation {
                    margin-top: 0;
                    h3 {
                        line-height: 3.3rem;
                        span {
                            &:nth-child(1) {
                                font-size: 2.5rem;
                            }
                            &:nth-child(2) {
                                font-size: 3.5rem;
                            }
                            &:nth-child(3) {
                                font-size: 1.5rem;
                            }
                        }
                    }
                }
            }
        }
        section.mini-test {
            .mini-test-wrapper {
                .content {
                    width: 90%;
                    h2 {
                        font-size: 1.5rem;
                        margin: 0 0 1.5rem 0;
                    }
                    h3 {
                        font-size: 1.7rem;
                    }
                    .question-container {
                        gap: .5rem;
                        .rules {
                            margin-bottom: 1.5rem;
                        }
                        .item {
                            width: 100%;
                            span.q {
                                padding: .7rem 1.5rem;
                                font-size: .8rem;
                                text-align: center;
                                span.chosen {
                                    height: 20px;
                                    width: 20px;
                                    top: -.5rem;
                                    left: -.5rem;
                                }
                            }
                        }
                    }
                }
                .result-container {
                    overflow: hidden;
                    font-size: 1.5rem;
                    .fireworks, .fireworks2 {
                        &.fireworks {
                            width: 40vw;
                            height: 40vw;
                            right: -6%;
                            top: 15%;
                        }

                        &.fireworks2 {
                            width: 25vw;
                            height: 25vw;
                            left: 10%;
                            top: 30%;
                        }
                    }
                }
            }
        }
        section.kpis {
            .kpis-wrapper {
                gap: 0;
                .line {
                    gap: 1rem;
                    .item {
                        width: 70vw;
                        padding: 1rem;
                        &.kpi {
                            .figure {
                                font-size: 3.5rem;
                            }
                            .explain-figure {
                                font-size: .8rem;
                            }
                        }
                        &.verbatim {
                            span {
                                font-size: 2vh;
                            }
                        }
                    }
                }
            }
        }
        .last {
            .last-wrapper {
                .cta-container {
                    a.ctc {
                        img {
                            display: none;
                        }
                    }
                }
            }
        }
    }

    @keyframes clipHero {
        0% { clip-path: circle(100% at 50% 50%) }
        100% { clip-path: circle(100% at 50% 50%) }
    }
    @keyframes clipHeroReverse {
        0% { clip-path: circle(100% at 50% 50%) }
        100% { clip-path: circle(100% at 50% 50%) }
    }
}