.overall-container {
    width: 100%;
    padding: 0 0 15vh 0;
    position: relative;
    z-index: 1;
    background: var(--main-layout-bg);

    .container {
        display: flex;
        width: calc(100% - 6rem);
        padding: 5vh 3rem 0 3rem;
        position: relative;
        z-index: 2;
        margin: 0 auto;
    }

    .header {
        width: calc(100% - 6rem);
        background: var(--main-layout-header-bg);
        height: calc(100vh - 10rem);
        padding: 7rem 3rem 3rem 3rem;
        display: flex;
        justify-content: center;
        align-content: center;
        .container {
            width: 100%;
            padding: 0;
            display: flex;
            max-width: none;
            border-radius: 2rem;
            margin: 0;
            align-items: center;
            justify-content: center;
            h1 {
                font-weight: 700;
                font-size: 4rem;
                line-height: 1em;
                letter-spacing: -0.03em;
                margin-bottom: 20vh;
                text-align: center;
                position: relative;
                z-index: 2;
            }
        }
        &.auto {
            height: auto;
            .container {
                h1 {
                    margin: 10vh 0;
                    font-size: 3rem;
                }
            }
        }
        &.for-ie {
            .container {
                background: linear-gradient(133deg, rgb(18 33 66) 0%, rgb(54 116 131) 100%);
                overflow: hidden;
                .wheel {
                    position: absolute;
                    width: 45%;
                    right: -14vw;
                    bottom: -26vh;
                    opacity: 1;
                    animation: slow-rotate 120s linear infinite;
                    transform-origin: center;
                    z-index: 1;
                }
            }
            &.and-certif {
                .container {
                    h1 {
                        margin-bottom: 0;
                    }
                }
            }
        }
        &.for-app {
            .container {
                background: linear-gradient(133deg, rgb(195 82 13) 0%, rgba(238, 166, 19, 1) 100%);
                justify-content: flex-end;
                /* background: #eea613; */
                .webapp-illus {
                    position: absolute;
                    width: 40%;
                    left: 5%;
                    bottom: -7%;
                    animation: float 6s ease-in-out infinite;
                }
                h1 {
                    width: 40%;
                    display: flex;
                    flex-wrap: wrap;
                    text-align: left;
                    padding: 0 10vw 0 0;
                    margin-bottom: 5vh;
                    span {
                        display: block;
                        width: 100%;
                        margin: 1rem 0 0 0;
                        font-size: 3.5rem;
                        line-height: 1em;
                    }
                }
            }
        }
        &.for-approach {
            .container {
                background: linear-gradient(133deg, rgb(8 11 17) 0%, rgb(8 14 25) 100%);
                display: flex;
                flex-wrap: wrap;
                align-content: flex-end;
                #particles-js {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    top: 0;
                    left: 0;
                    opacity: .4;
                    z-index: 1;
                }
                h1 {
                    width: 100%;
                    position: relative;
                    z-index: 2;
                    margin: 0 0 4vh 0;
                }
                .pys {
                    position: relative;
                    z-index: 2;
                    height: 60vh;
                    margin-bottom: -20vh;
                }
            }
        }
        &.for-404 {
            .container {
                background: linear-gradient(162deg, rgb(2 5 11) 0%, rgb(8 44 53) 100%);
                overflow: hidden;
                .moon {
                    width: 50%;
                    position: absolute;
                    right: 0;
                    bottom: 0;
                    z-index: 1;
                }
                .apollo {
                    position: relative;
                    width: 40%;
                    max-width: 500px;
                    z-index: 2;
                    animation: floatApollo 6s ease-in-out infinite;
                }
            }
        }
    }


    .page-content {
        position: relative;
        display: flex;
        width: 100%;
        p {
            line-height: 1.9em;
            .inline-logo {
                width: 6rem;
            }
            &.flex {
                display: flex;
                gap: 1rem;
            }
            strong {
                color: var(--yellow);
            }
        }
        p, ul, h3 {
            a {
                color: #7892be;
                text-decoration: underline;
                &:hover {
                    color: var(--main-text-color);
                    text-decoration: none;
                }
            }
        }
        blockquote {
            margin: 9vh 0;
            padding: 3rem 5rem 6rem 5rem;
            position: relative;
            span {
                position: relative;
                font-family: 'serif';
                font-style: italic;
                font-size: 3rem;
                line-height: 1em;
                color: #1dfff7;
                sup {
                    position: absolute;
                    left: -.7em;
                    font-size: 3em;
                    color: #fff;
                }
                sub {
                    position: absolute;
                    font-size: 3em;
                    right: -.5em;
                    bottom: -.5em;
                    color: #fff;
                }
            }
            span.who {
                position: absolute;
                bottom: 0;
                right: 0;
                font-style: italic;
                font-family: inherit;
                color: var(--main-text-color);
                font-size: 1.5rem;
            }

        }
        .mention {
            display: flex;
            padding: 1rem 0;
            span {
                color: #405984;
            }
            a {
                color: #5375af;
                text-decoration: underline;
                &:hover {
                    color: var(--main-text-color);
                    text-decoration: none;
                }
            }
        }
        .glow {
            position: fixed;
            top: 0;
            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;
            &.visible {
                opacity: 1;
            }
        }

        .explanation-container {
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            .side-menu {
                width: calc(25% - 3em);
                padding-right: 3em;
                &.jump-to {
                    .side-menu-container {
                        display: flex;
                        flex-wrap: wrap;
                        gap: 2em;
                        width: 100%;
                        position: sticky;
                        top: 20vh;
                        border-right: 1px dotted var(--cyan);
                        ul {
                            padding: 0;
                            list-style: none;
                            max-width: inherit;
                            margin: 0;
                            li {
                                margin: 0 0 1em 0;
                                position: relative;
                                a {
                                    display: flex;
                                    text-decoration: none;
                                    color: var(--main-text-color);
                                    opacity: .4;
                                    transition: all 0.5s ease;
                                    gap: .5em;
                                    span:nth-child(2) {
                                        display: flex;
                                        width: calc(95% - .8rem);
                                    }
                                    &.selected {
                                        opacity: 1;
                                    }
                                }
                            }
                        }
                    }
                }
            }
            .explanation-content {
                width: 75%;
                &.full {
                    width: 100%;
                }
                h2 {
                    color: var(--yellow);
                    font-weight: 600;
                    font-style: italic;
                    margin-top: 8rem;
                    &:first-child {
                        margin: 0;
                    }
                }
                h3 {
                    margin-top: 4rem;
                    &.no-mrg {
                        margin: 1rem 0 0 0;
                    }
                }
                .when {
                    display: block;
                    margin: 1rem 0;
                    font-style: italic;
                    color: var(--cyan);
                }
                hr {
                    margin: 5vh 0;
                    border: none;
                    height: 1px;
                    background-color: #38455b;
                }
            }
            .centered-content {
                display: flex;
                width: 100%;
                margin: 4rem 0;
                justify-content: center;
            }
        }
        .is-revealed {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s ease, transform 0.8s ease;
        }
        .revealed {
            opacity: 1;
            transform: translateY(0);
        }
    }


    /* Full section template */
    .full-section {
        width: 100vw;
        height: calc(100vh - 6rem);
        padding: 3rem;
        display: flex;
        flex-wrap: wrap;
        position: relative;
        z-index: 3;
        &.auto {
            height: auto;
        }
        .half-container {
            width: 50%;
        }
    }


    /* ############ SPECIFIC FOR IE */
    .equation {
        width: calc(100% - 4rem);
        border-radius: 2rem;
        padding: 4rem 2rem;
        display: flex;
        flex-wrap: wrap;
        gap: 2em;
        .normal-equation {
            display: flex;
            width: 100%;
            font-weight: 700;
            font-size: 3rem;
            line-height: 1em;
            justify-content: center;
            align-items: flex-start;
        }
        .explain {
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            span {
                display: flex;
                width: 100%;
                justify-content: center;
                font-size: 1.3rem;
                margin: .3em 0;
                &:nth-child(1) {
                    text-decoration: underline;
                    font-weight: 500;
                }
            }
        }
        .bad-equation {
            display: flex;
            width: 100%;
            font-weight: 700;
            font-size: 6rem;
            line-height: 1em;
            color: #F44336;
            justify-content: center;
            align-items: flex-end;
        }
    }
    .envie-bloque {
        display: flex;
        .part {
            width: 50%;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            span {
                display: block;
                text-align: center;
                width: 100%;
                font-size: 1.2rem;
                line-height: 1.5em;
            }
            img {
                width: 40%;
                margin-top: 2rem;
                border-radius: 1rem;
            }
            &:nth-child(1) {
                justify-content: flex-end;
                span {
                    color: #2bc06a;
                    text-align: right;
                    padding-right: 1em;
                }
                img {
                    border-radius: 1rem 0 0 1rem;
                }
            }
            &:nth-child(2) {
                justify-content: flex-start;
                span {
                    color: #F44336;
                    text-align: left;
                    padding-left: 1em;
                }
                img {
                    border-radius: 0 1rem 1rem 0;
                }
            }
        }
    }
    .wheel {
        width: 40vh;
        filter: drop-shadow(0 0 80px rgba(0,0,0,0.5))
    }
    .wef-line {
        display: flex;
        width: calc(100% - 3rem);
        padding: 1.5rem;
        border-radius: 1rem;
        background: #1a263a;
        margin: 0 0 1.2rem 0;
        /* border: 1px dotted #000000; */
        box-shadow: 0px 4px 8px 0px #070e18;
        color: rgba(255,255,255,0.5);
        &.is-ie {
            font-weight: 600;
            font-size: 1.3rem;
            color: rgba(255,255,255,1);
            background: #273753;
        }
    }
    .key-points-ie {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        margin: 4rem 0;
        position: relative;
        gap: 2rem;
        .key-point {
            display: flex;
            flex-wrap: wrap;
            width: calc(50% - 1rem);
            position: relative;
            align-content: flex-start;
            span {
                display: block;
                width: 100%;
                text-align: center;
                padding: 2rem 0;
                font-size: 1.5rem;
                font-weight: 600;
                &.icon {
                    padding-bottom: 0;
                    svg {
                        width: 2rem;
                        height: 2rem;
                    }
                }
            }
            .explain {
                width: 100%;
                display: flex;
                align-items: center;
                text-align: center;
                justify-content: center;
                padding: 2rem;
                border-radius: 1rem;
                height: 15vh;
            }
            &:nth-child(1) {
                .explain {
                    background: #213048;
                }
            }
            &:nth-child(2) {
                .explain {
                    background: #131c29;
                }
            }
            &:nth-child(3) {
                .explain {
                    background: #131c29;
                }
            }
            &:nth-child(4) {
                .explain {
                    background: #213048;
                }
            }
        }
    }
    .school-line {
        display: flex;
        flex-wrap: wrap;
        width: calc(100% - 1.5rem);
        padding: 1.5rem 1.5rem 1.5rem 0;
        border-radius: 1rem 1rem 1rem 0;
        margin: 0 0 1.2rem 0;
        box-shadow: 2px 2px 0px 0px #070e18;
        color: rgba(255, 255, 255, 0.5);
        gap: 1.5rem;
        .logo {
            width: 15%;
            img {
                width: 100%;
                border-radius: .5rem;
            }
        }
        .link {
            width: calc(85% - 1.5rem);
            display: flex;
            a {
                color: #5375af;
                text-decoration: underline;
                word-break: break-all;
                &:hover {
                    color: var(--main-text-color);
                    text-decoration: none;
                }
            }
        }
    }
    .ie-refs {
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        padding: 0;
        gap: 1rem;
        span {
            display: block;
            width: 100%;
            &:nth-child(1) {
                font-weight: 600;
            }
        }
    }
    .mhs {
        margin-bottom: 1rem !important;
        svg {
            #Path_7, #Path_8, #Path_9 {
                fill: white
            }
        }
    }
    .study {
        width: 100%;
        justify-content: center;
        margin-top: 4vh;
    }


    /* ############ SPECIFIC FOR EQi Certif */
    .eqi-logo {
        width: 20vw;
        margin-top: 1.5rem;
        min-width: 200px;
    }
    .pack-and-inscription {
        display: flex;
        width: 100%;
        gap: 2rem;
        margin: 2rem 0 0 0;
        .pack {
            width: 50%;
            display: flex;
            flex-wrap: wrap;
            filter: drop-shadow(0 0 80px rgba(0, 0, 0, 0.5));

            .pack-container {
                padding: 3rem 2rem 3rem 2rem;
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                background: #213048;
                border-radius: 1rem 1rem 0 0;
                position: relative;
                overflow: hidden;

                .item {
                    width: 100%;
                    display: flex;
                    padding: 1rem 0;
                    text-align: center;
                    justify-content: center;
                    font-size: 1.1em;
                    font-weight: 600;
                    border-bottom: 1px dotted #59677e;

                    &:last-child {
                        border: 0;
                    }
                }

                .bandeau {
                    position: absolute;
                    right: -61px;
                    top: 25px;
                    display: block;
                    width: 14rem;
                    font-weight: 600;
                    font-size: .8rem;
                    text-transform: uppercase;
                    text-align: center;
                    background: #546a8e;
                    padding: 5px 0;
                    transform: rotate(35deg);
                    color: #fff;
                }
            }

            .price {
                font-family: "Unbounded", sans-serif;
                width: calc(100% + 2rem);
                padding: 1rem 0;
                font-size: 1.8em;
                letter-spacing: -0.04em;
                font-weight: 600;
                background: #4e6384;
                color: #ffffff;
                text-align: center;
                border-radius: 0 0 1rem 1rem;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }

        .inscription-form {
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;
            background: #111c2f;
            width: calc(50% - 3rem);
            gap: .7rem;
            padding: 1.5rem;
            border-radius: 1rem;
            h3 {
                width: 100%;
                margin: 0 !important;
                text-align: center;
                line-height: 1em;
                color: var(--yellow);
                font-size: 1.5rem;
            }
            p {
                width: 100%;
                text-align: center;
                margin: 0;
            }
            form {
                display: flex;
                gap: 1rem;
                .form-block {
                    &.for-submit {
                        display: flex;
                        flex-wrap: wrap;
                        align-items: center;
                        margin-top: 1.2rem;
                        justify-content: flex-end;
                        input[type=submit] {
                            display: inline-block;
                            width: auto;
                            border-radius: 2em;
                            background: var(--yellow);
                            &:hover {
                                box-shadow: 0 0 2px 2px #000000, 0 0 17px 11px #ffffff24;
                                background: var(--cta-1-bg-hovered);
                                color: var(--cta-1-color-hovered) !important;
                            }
                            &.hide {
                                display: none;
                            }
                        }
                        img.spinner {
                            width: 60px;
                            height: 60px;
                            align-items: center;
                            display: none;
                            &.on {
                                display: block;
                            }
                        }
                    }
                }
                .result {
                    width: 100%;
                    display: flex;
                    justify-content: flex-end;
                    margin: .5rem 0 0 0;
                    &.bad {
                        color: #f37d7d;
                    }
                    &.good {
                        color: #74f46f;
                    }
                }
                .mentions {
                    margin: 0 0 .5rem 0;
                    font-size: .8em;
                    text-align: left;
                }
            }
        }
    }
    .inscription {
        width: 100%;
        justify-content: center;
        margin-top: 4vh;
    }


    /* ############ SPECIFIC FOR APP */
    .full-section.for-app {
        .core-info {
            width: calc(50% - 4rem);
            padding: 5rem 4rem 0 0;
            h2 {
                display: block;
                font-size: 2.5rem;
                line-height: 1.2em;
                font-weight: 700;
                color: var(--yellow);
                margin: 0 0 6vh 0;
                strong {
                    font-style: italic;
                    color: #fff;
                    font-weight: 600;
                }
            }
            .cta-container {
                margin-top: 2rem;
            }
        }
        .detailed-info {
            width: calc(50% - 4rem);
            padding: 5rem 0 0 4rem;
            p:nth-child(1) {
                margin-top: 0;
            }
            .block-retention {
                width: 100%;
                margin: 6vh 0 0 0;
                display: flex;
                flex-wrap: wrap;
                gap: 1rem;
                strong {
                    display: block;
                    width: 100%;
                    color: var(--yellow);
                    font-size: 1.8rem;
                    line-height: 1em;
                }
                ul {
                    padding: 0;
                    list-style: none;
                    display: flex;
                    flex-wrap: wrap;
                    width: 100%;
                    gap: 2em;
                    li {
                        display: flex;
                        flex-wrap: wrap;
                        .picto {
                            width: 5rem;
                            display: flex;
                            align-items: center;
                            svg {
                                height: 3rem;
                                width: 3rem;
                                path,line,circle {
                                    stroke: var(--yellow);
                                    stroke-width: 1px;
                                }
                            }
                        }
                        .explain {
                            width: calc(80% - 5rem);
                            display: flex;
                            align-items: center;
                            p {
                                margin: 0;
                            }
                        }
                    }
                }
            }
        }
        &.second {
            padding: 0;
            height: 400vh;
            .app-second {
                width: calc(100vw - 6rem);
                padding: 7rem 3rem 3rem 3rem;
                height: calc(100vh - 10rem);
                position: sticky;
                top: 0;
                .app-detail-container {
                    height: 100%;
                    width: 100%;
                    position: relative;
                    .smartphone-container {
                        position: absolute;
                        width: 20vw;
                        height: 100%;
                        top: 0;
                        left: 10vw;
                        display: flex;
                        align-items: center;
                        .smartphone {
                            width: 20vw;
                            height: calc(20vw * 2.03);
                            position: relative;
                            overflow: hidden;
                            .device {
                                position: absolute;
                                top: 0;
                                left: 0;
                                width: 100%;
                                z-index: 2;
                            }
                            .content {
                                position: absolute;
                                z-index: 1;
                                top: 0;
                                left: 0;
                                margin: 15px;
                                width: calc(100% - 30px);
                                height: calc(100% - 30px);
                                img {
                                    position: absolute;
                                    top: 0;
                                    left: 0;
                                    width: 100%;
                                    height: 100%;
                                    opacity: 0;
                                    transition: opacity 0.4s ease;
                                    pointer-events: none;
                                    border-radius: 40px;
                                    &:first-child {
                                        opacity: 1; /* au cas où */
                                    }
                                }
                            }
                        }
                    }
                    .app-explain-container {
                        width: 100%;
                        display: flex;
                        height: 100%;
                        flex-wrap: wrap;
                        align-items: center;
                        align-content: center;
                        gap: 2rem;
                        h2 {
                            display: block;
                            width: 100%;
                            font-size: 3.2rem;
                            line-height: 1em;
                            font-weight: 700;
                            margin: 0;
                            padding-left: calc(30vw + 3rem);
                        }
                        .explain-container {
                            width: 100%;
                            padding: 3rem 3rem 3rem calc(30vw + 3rem);
                            background: #1c2c49;
                            border-radius: 2rem;
                            display: flex;
                            flex-wrap: wrap;
                            .main-content {
                                width: 100%;
                                height: 30vh;
                                position: relative;
                                .part {
                                    position: absolute;
                                    top: 0;
                                    left: 0;
                                    width: 100%;
                                    opacity: 0;
                                    transform: translateY(30px);
                                    transition: all 0.5s ease;
                                    pointer-events: none; /* évite les interactions avec les parties cachées */
                                    &.visible {
                                        opacity: 1;
                                        transform: translateY(0);
                                        pointer-events: auto;
                                    }
                                    h3 {
                                        margin: .5rem 0 2rem 0;
                                        font-weight: 700;
                                        color: var(--yellow);
                                        font-size: 2rem;
                                        line-height: 1em;
                                    }
                                }
                            }
                            .cta-container {
                                width: 100%;
                                margin-top: 2rem;
                            }
                        }
                    }
                }
            }
        }
        &.third {
            .third-container {
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                h2 {
                    width: 100%;
                    text-align: center;
                    font-size: 3.2rem;
                    line-height: 1em;
                    font-weight: 700;
                    color: var(--yellow);
                    margin: 0 0 8vh 0;
                }
                .offers {
                    display: flex;
                    gap: 2rem;
                    width: 100%;
                    justify-content: center;
                    align-items: stretch;
                    .offer {
                        width: 33.333%;
                        display: flex;
                        flex-direction: column;
                        align-items: stretch;
                        h3 {
                            display: block;
                            text-align: center;
                            margin-bottom: 2rem;
                            span {
                                font-size: 1.8rem;
                                color: var(--main-text-color);
                            }
                        }
                        .offer-content {
                            flex-grow: 1;
                            display: flex;
                            flex-direction: column;
                            justify-content: flex-start;
                            padding: 2rem;
                            border-radius: 2rem;
                            background: #1c2c49;
                        }
                        span {
                            width: 100%;
                            display: block;
                            text-align: center;
                            font-weight: 700;
                            font-size: 1.5em;
                            line-height: 1em;
                            color: var(--yellow);
                        }
                        p {
                            font-size: 1em;
                        }
                        .cta-container {
                            width: 100%;
                        }
                        &.of {
                            .offer-content {
                                background: #4d89f7;
                                span {
                                    color: var(--darkBlue);
                                    font-weight: 700;
                                }
                                p {
                                    color: var(--darkBlue);
                                    font-weight: 500;
                                }
                            }
                        }
                        &.offer2 {
                            transition-delay: .5s;
                        }
                        &.offer3 {
                            transition-delay: 1s;
                        }
                    }
                }
            }
        }
    }

    /* ############ SPECIFIC FOR APPROACH */
    .full-section.for-approach {
        justify-content: center;
        &.intro-main-wrapper {
            width: 100vw;
            padding: 0;
            height: auto;
            margin: 10vh 0;
            display: flex;
            align-items: center;
            align-content: flex-start;
            position: relative;
            .intro {
                display: flex;
                flex-wrap: wrap;
                overflow: hidden;
                h2 {
                    display: flex;
                    justify-content: center;
                    width: 100%;
                    text-align: center;
                    padding: 0 3rem;
                    span {
                        display: block;
                        width: 100%;
                        max-width: 700px;
                        line-height: 1.3em;
                        strong {
                            color: var(--yellow);
                        }
                    }
                }
            }
        }
        .associes-container {
            display: flex;
            flex-wrap: nowrap;
            width: 100%;
            padding: 0 3rem;
            gap: 2rem;
            justify-content: center;
            .associe {
                width: 350px;
                aspect-ratio: 1 / 1.3;
                border: none;
                background: transparent;
                cursor: pointer;
                padding: .5rem;
                .flip-card-container {
                    width: 100%;
                    height: 100%;
                    perspective: 1000px;
                    .flip-card-inner {
                        width: 100%;
                        height: 100%;
                        position: relative;
                        transform-style: preserve-3d;
                        transition: transform 0.6s;
                    }
                    .flip-card-front,
                    .flip-card-back {
                        position: absolute;
                        inset: 0;
                        backface-visibility: hidden;
                    }
                    .flip-card-front {
                        display: flex;
                        flex-wrap: wrap;
                        .pic-container {
                            width: 100%;
                            height: 80%;
                            img {
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                                object-position: center top;
                                border-radius: .7rem .7rem 0 0;
                            }
                        }
                        .who {
                            width: 100%;
                            height: calc(20% - 1.6rem);
                            display: flex;
                            justify-content: space-between;
                            padding: .8rem;
                            background: #080d18;
                            align-items: center;
                            border-radius: 0 0 .7rem .7rem;
                            .person {
                                display: flex;
                                flex-wrap: wrap;
                                align-content: flex-start;
                                span {
                                    display: block;
                                    width: 100%;
                                    &.name {
                                        font-weight: 700;
                                    }
                                    &.fonction {
                                        font-style: italic;
                                        color: var(--yellow);
                                    }
                                }
                            }
                            .social {
                                width: 35px;
                                height: 35px;
                                background: white;
                                border-radius: 8px;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                svg {
                                    width: 75%;
                                    height: 75%;
                                    path {
                                        fill: #080d18;
                                    }
                                }
                            }
                        }
                    }
                    .flip-card-back {
                        transform: rotateY(180deg);
                        display: flex;
                        flex-wrap: wrap;
                        .pic-container {
                            width: 100%;
                            height: 80%;
                            position: relative;
                            display: flex;
                            align-items: center;
                            img {
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                                object-position: center top;
                                border-radius: .7rem .7rem 0 0;
                                position: absolute;
                                top: 0;
                                left: 0;
                                opacity: .1;
                                z-index: 1;
                            }
                            .overview {
                                padding: 0 1rem;
                                position: relative;
                                z-index: 2;
                                font-size: .9em;
                                .cta {
                                    width: auto;
                                    display: inline-flex;
                                    padding: .5em 1em;
                                    font-size: .9em;
                                }
                            }
                        }
                        .who {
                            width: 100%;
                            height: calc(20% - 1.6rem);
                            display: flex;
                            justify-content: space-between;
                            padding: .8rem;
                            background: #080d18;
                            align-items: center;
                            border-radius: 0 0 .7rem .7rem;
                            .person {
                                display: flex;
                                flex-wrap: wrap;
                                align-content: flex-start;
                                span {
                                    display: block;
                                    width: 100%;
                                    &.name {
                                        font-weight: 700;
                                    }
                                    &.fonction {
                                        font-style: italic;
                                        color: var(--yellow);
                                    }
                                }
                            }
                            .social {
                                width: 35px;
                                height: 35px;
                                display: flex;
                                a {
                                    height: 100%;
                                    width: 100%;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    background: white;
                                    border-radius: 8px;
                                    svg {
                                        width: 75%;
                                        height: 75%;

                                        path {
                                            fill: #080d18;
                                        }
                                    }
                                    &:hover {
                                        background: var(--yellow);
                                    }
                                }
                            }
                        }
                    }
                    &:hover {
                        > .flip-card-inner {
                            transform: rotateY(180deg);
                        }
                    }
                }
            }
        }
    }



    /* ########### SPECIFIC FOR LEGAL */
    .conversation {
        width: 100%;
        display: flex;
        justify-content: center;
        margin: 1em 0 4em 0;
        .conversation-container {
            width: 100%;
            max-width: 1000px;
            display: flex;
            flex-wrap: wrap;
            .part {
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                .sub-part {
                    width: 100%;
                    display: flex;
                    margin: 0 0 1em 0;
                    &.start {
                        justify-content: flex-start;
                    }
                    &.end {
                        justify-content: flex-end;
                    }
                    .question {
                        width: 30%;
                        padding: 2em 3em;
                        border-radius: 2em 0 2em 2em;
                        background: var(--yellow);
                        color: var(--darkBlue);
                        font-weight: 500;
                    }
                    .answer {
                        width: 60%;
                        padding: 2em 3em;
                        border-radius: 0 2em 2em 2em;
                        background: #1f2c43;
                        color: white;
                        position: relative;
                        .avatar {
                            position: absolute;
                            height: 50px;
                            width: 50px;
                            border-radius: 50%;
                            overflow: hidden;
                            background: #fff;
                            top: -35px;
                            left: 30px;
                            border: 4px solid #fff;
                            img {
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                            }
                        }
                    }
                }
            }
        }
    }
}


/* modals */
.bio-container {
    visibility: hidden;
    display: flex;
    position: fixed;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100vw;
    height: 100vh;
    opacity: 0;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    pointer-events: none;
    .bio {
        width: 60vw;
        height: 50vh;
        background: white;
        border-radius: 1rem;
        padding: 3rem;
        position: relative;
        .close {
            position: absolute;
            z-index: 6;
            right: 1rem;
            top: 1rem;
            svg {
                width: 2rem;
                height: 2rem;
                circle {
                    stroke: var(--darkBlue);
                    fill: var(--darkBlue);
                }
                path {
                    stroke: white;
                }
            }
        }
        .content {
            width: 100%;
            height: 100%;
            display: none;
            gap: 2rem;
            .bio-content {
                width: 60%;
                display: flex;
                flex-direction: column;
                color: var(--darkBlue);
                h3 {
                    margin: 0;
                    font-weight: 600;
                    font-size: 1.42em;
                }
                .position {
                    display: block;
                    width: 100%;
                    font-style: italic;
                    margin-bottom: .5rem;
                }
                .social {
                    width: 100%;
                    margin-bottom: .5rem;
                    a {
                        width: 35px;
                        height: 35px;
                        background: var(--darkBlue);
                        border-radius: 8px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        svg {
                            width: 75%;
                            height: 75%;
                            path {
                                fill: #fff;
                            }
                        }
                    }
                }
                .full-bio {
                    height: 100%;
                    overflow-y: auto;
                    flex: 1;
                    min-height: 0;
                    padding-right: 2rem;
                    p {
                        margin: 0 0 1rem 0;
                        a {
                            text-decoration: underline;
                            color: black;
                            font-weight: 500;
                        }
                    }
                    &::-webkit-scrollbar {
                        width: 6px;
                    }
                    &::-webkit-scrollbar-thumb {
                        background: var(--darkBlue); /* poignée */
                    }
                    &::-webkit-scrollbar-thumb:hover {
                        background: #d2a100;
                    }
                    &::-webkit-scrollbar-track {
                        background: transparent;
                    }
                    &::-webkit-scrollbar-button {
                        display: none; /* supprime les flèches si tu n’en veux pas */
                    }
                }
            }
            .picture {
                width: 40%;
                display: flex;
                align-items: flex-end;
                justify-content: flex-end;
                img {
                    height: auto;
                    width: 100%;
                }
            }
            &.on {
                display: flex;
            }
        }
    }
    &.on {
        opacity: 1;
        visibility: visible;
        pointer-events: all;
    }
}




@keyframes slow-rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
@keyframes float {
    0%   { transform: translateY(0px); }
    50%  { transform: translateY(-8px); }
    100% { transform: translateY(0px); }
}
@keyframes floatApollo {
    0%   { transform: translateY(0px) translateX(0px); }
    50%  { transform: translateY(-10px) translateX(5px); }
    100% { transform: translateY(0px) translateX(0px); }
}


/* ##################################################################################################### */
/* ##################################  R E S P O N S I V E  ############################################ */
/* ##################################################################################################### */
/* Small Laptops */
@media screen and (min-width: 1024px) and (max-width: 1366px) {
    .overall-container {
        .page-content {
            .glow {
                width: 90vw;
                height: 90vh;
            }
        }
        .full-section {
            &.for-app {
                .core-info {
                    width: calc(50% - 2rem);
                    padding: 5rem 2rem 0 0;
                    h2 {
                        font-size: 2.1rem;
                    }
                }
                .detailed-info {
                    width: calc(50% - 2rem);
                    padding: 5rem 0 0 2rem;
                    .block-retention {
                        strong {
                            font-size: 1.5rem;
                        }
                    }
                }
                &.second {
                    .app-second {
                        .app-detail-container {
                            .smartphone-container {
                                left: 4vw;
                                .smartphone {
                                    .content {
                                        img {
                                            border-radius: 20px;
                                        }
                                    }
                                }
                            }
                            .app-explain-container {
                                h2 {
                                    font-size: 2.5rem;
                                    padding-left: calc(22vw + 3rem);
                                }
                                .explain-container {
                                    padding: 1rem 2rem 2rem calc(22vw + 3rem);
                                    .main-content {
                                        .part {
                                            h3 {
                                                font-size: 1.5rem;
                                                margin: .5rem 0 1rem 0;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}


@media (max-width: 1366px) {
    .overall-container {
        .page-content {
            .full-section {
                &.for-approach {
                    .associes-container {
                        .associe {
                            width: 280px;

                            .flip-card-container {
                                .flip-card-back {
                                    .pic-container {
                                        .overview {
                                            line-height: 1em;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .bio-container {
        .bio {
            padding: 2rem;
            height: 60vh;
            .content {
                .bio-content {
                    width: 65%;
                }
                .picture {
                    width: 35%;
                }
            }
        }
    }
}


@media (max-width: 1199px) {
    .overall-container {
        .header {
            &.for-app {
                .container {
                    h1 {
                        width: 100%;
                        text-align: center;
                        padding: 0 10vw;
                        margin: 0 0 40vh 0;
                        span {
                            font-size: 3rem;
                        }
                    }
                    .webapp-illus {
                        left: calc(50% - 20%);
                        bottom: -15%;
                    }
                }
            }
        }
        .page-content {
            .full-section {
                &.for-app {
                    .core-info {
                        width: 100%;
                        padding-right: 0;
                    }
                    .detailed-info {
                        width: 100%;
                        padding-left: 0;
                        .block-retention {
                            width: 60%;
                            margin: 10vh auto 0 auto;
                            strong {
                                text-align: center;
                            }
                            ul {
                                width: 100%;
                                li {
                                    width: 100%;
                                    .picto {
                                        width: 100%;
                                        justify-content: center;
                                    }
                                    .explain {
                                        width: 100%;
                                        text-align: center;
                                        justify-content: center;
                                    }
                                }
                            }
                        }
                    }
                    &.second {
                        .app-detail-container {
                            .smartphone-container {
                                .smartphone {
                                    .content {
                                        img {
                                            top: -1%;
                                            left: -1%;
                                            width: 102%;
                                            height: 102%;
                                            border-radius: 20px;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
                &.for-approach {
                    .associes-container {
                        padding: 0;
                        justify-content: space-between;
                        gap: 1rem;
                    }
                }
            }
        }
    }
    .bio-container {
        .bio {
            width: 80vw;
            height: 50vh;
            .content {
                .bio-content {
                    width: 65%;
                }
                .picture {
                    width: 35%;
                }
            }
        }
    }
}
@media (max-width: 991px) {
    .overall-container {
        .header {
            width: calc(100% - 3rem);
            padding: 8rem 1.5rem 3rem 1.5rem;
            .container {
                h1 {
                    font-size: 3rem;
                    margin: 0;
                }
            }
            &.for-app {
                .container {
                    .webapp-illus {
                        left: calc(50% - 20%);
                        bottom: 0;
                        min-width: 300px;
                    }
                    h1 {
                        padding: 0 4vw;
                        span {
                            font-size: 2rem;
                        }
                    }
                }
            }
        }
        .page-content {
            .container {
                width: calc(100% - 3rem);
                padding: 3vh 1.5rem 0 1.5rem;
                .explanation-container {
                    .side-menu {
                        display: none;
                    }
                    .explanation-content {
                        width: 100%;
                        blockquote {
                            padding: 2rem 3rem 4rem 3rem;
                            span {
                                font-size: 2rem;
                                &.who {
                                    font-size: 1.5rem;
                                }
                            }
                        }
                        .ie-refs {
                            span a {
                                word-break: break-word;
                            }
                        }
                    }
                }
            }
        }
        .full-section {
            padding: 1.5rem;
            &.for-app {
                &.second {
                    .app-second {
                        .app-detail-container {
                            .smartphone-container {
                                width: 35vw;
                                left: -10vw;
                                top: 0;
                                .smartphone {
                                    width: 35vw;
                                    height: calc(35vw * 2.03);
                                    .content {
                                        img {
                                            border-radius: 30px;
                                        }
                                    }
                                }
                            }
                            .app-explain-container {
                                h2 {
                                    font-size: 2rem;
                                    padding-left: calc(26vw + 3rem);
                                }
                                .explain-container {
                                    padding: 2rem 3rem 5rem calc(26vw + 3rem);
                                    .main-content {
                                        height: 40vh;
                                        .part {
                                            p {
                                                line-height: 1.5em;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
                &.third {
                    .third-container {
                        .offers {
                            flex-direction: column;
                            .offer {
                                width: 80%;
                                margin: 0 auto;
                            }
                        }
                    }
                }
            }
            &.for-approach {
                .associes-container {
                    flex-wrap: wrap;
                    justify-content: center !important;
                    .associe {
                        width: 40% !important;
                    }
                }
            }
        }
        .conversation {
            .conversation-container {
                .part {
                    .sub-part {
                        .answer {
                            width: 70%;
                        }
                    }
                }
            }
        }
    }
}
@media (max-width: 767px) {
    .overall-container {
        .header {
            width: calc(100% - 2rem);
            padding: 6rem 1rem 3rem 1rem;
            &.auto {
                .container {
                    h1 {
                        font-size: 2rem;
                    }
                }
            }
            &.for-ie {
                .container {
                    .wheel {
                        bottom: -5vh;
                    }
                    h1 {
                        margin-bottom: 15vh;
                    }
                }
            }
            &.for-approach {
                h1 {
                    span {
                        width: 100%;
                        display: block;
                    }
                }
                .container {
                    .pys {
                        height: 35vh;
                        margin-bottom: 0;
                        top: 15vh;
                    }
                }
            }
            &.for-404 {
                .container {
                    .moon {
                        width: 70%;
                    }
                    .apollo {
                        position: relative;
                        width: 60%;
                    }
                }
            }
        }
        .envie-bloque {
            .part {
                img {
                    width: 70%;
                }
                span {
                    font-size: 1rem;
                }
            }
        }
        .wef-line {
            &.is-ie {
                font-size: 1.2rem;
            }
        }
        .school-line {
            gap: 1rem;
            .logo {
                width: 40%;
            }
            .link {
                width: 100%;
            }
        }
        .key-points-ie {
            .key-point {
                width: calc(100% - 1rem);
            }
        }
        .full-section {
            &.for-approach {
                line-height: 1.5rem;
                &.intro-main-wrapper {
                    margin: 10vh 0 5vh 0;
                    .intro {
                        h2 {
                            padding: 0 1.5rem;
                        }
                    }
                }
            }
            &.for-app {
                &.first {
                    .core-info {
                        padding: 3rem 0;
                        h2 {
                            font-size: 1.7rem;
                        }
                    }
                    .detailed-info {
                        padding: 2rem 0;
                        .block-retention {
                            width: 100%;
                            margin: 5rem auto;
                            strong {
                                font-size: 1.5rem;
                            }
                        }
                    }
                }
                &.second {
                    .app-second {
                        padding: 7rem 1.5rem 3rem 1.5rem;
                        width: calc(100vw - 3rem);
                        .app-detail-container {
                            .smartphone-container {
                                width: 45vw;
                                left: -28vw;
                                top: 0;
                                .smartphone {
                                    width: 45vw;
                                    height: calc(45vw * 2.03);
                                    .content {
                                        img {
                                            border-radius: 30px;
                                        }
                                    }
                                }
                            }
                            .app-explain-container {
                                h2 {
                                    font-size: 2rem;
                                    padding-left: calc(16vw + 3rem);
                                }
                                .explain-container {
                                    padding: 1rem 2rem 2rem calc(16vw + 3rem);
                                    .main-content {
                                        height: 40vh;
                                        .part {
                                            p {
                                                line-height: 1.5em;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
                &.third {
                    .third-container {
                        h2 {
                            font-size: 1.5rem;
                        }
                        .offers {
                            .offer {
                                width: 100%;
                                .offer-content {
                                    span {
                                        font-size: 1.1rem;
                                    }
                                }
                            }
                        }
                    }
                }
            }
            &.for-approach {
                .associes-container {
                    .associe {
                        width: 60% !important;
                        .flip-card-container {
                            .flip-card-inner {
                                .flip-card-back {
                                    .pic-container {
                                        .overview {
                                            font-size: 1rem;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
        .conversation {
            .conversation-container {
                .part {
                    .sub-part {
                        .question {
                            width: 60%;
                        }
                        .answer {
                            width: 90%;
                            .avatar {
                                height: 35px;
                                width: 35px;
                                top: -20px;
                                left: 10px;
                            }
                        }
                    }
                }
            }
        }
        .pack-and-inscription {
            flex-wrap: wrap;
            .pack {
                width: 100%;
            }
            .inscription-form {
                width: 100%;
            }
        }
    }
    .bio-container {
        .bio {
            width: calc(90vw - 2rem);
            height: calc(90vh - 2rem);
            overflow-y: auto;
            padding: 1rem;
            .close {
                position: sticky;
                right: inherit;
                left: 90vw;
            }
            .content {
                flex-wrap: wrap;
                gap: 0;
                .bio-content {
                    order: 2;
                    width: 100%;
                    padding-bottom: 2rem;
                    .full-bio {
                        height: auto;
                        padding: 0;
                    }
                }
                .picture {
                    justify-content: center;
                    width: 100%;
                    order: 1;
                    img {
                        width: 200px;
                        border-radius: 1rem;
                        margin: 0 0 2rem 0;
                    }
                }
            }
        }
    }
}
@media (max-width: 650px) {

}
@media (max-width: 550px) {
    .overall-container {
        .header {
            .container {
                h1 {
                    font-size: 2rem;
                }
            }
            &.for-app {
                .container {
                    .webapp-illus {
                        left: -14%;
                        bottom: -11%;
                    }
                }
            }
            &.for-ie {
                .container {
                    h1 {
                        margin-bottom: 0;
                    }
                    .wheel {
                        width: 70%;
                    }
                }
            }
        }
        .page-content {
            .container {
                width: calc(100% - 3rem);
                padding: 3vh 1.5rem 0 1.5rem;

                .explanation-container {
                    .side-menu {
                        display: none;
                    }
                    .explanation-content {
                        width: 100%;
                        blockquote {
                            padding: 2rem 1.5rem 4rem 1.5rem;
                            span {
                                font-size: 1.5rem;
                                &.who {
                                    font-size: 1.2rem;
                                }
                            }
                        }
                    }
                }
            }
            .full-section {
                &.for-app {
                    &.first {
                        .core-info {
                            .cta-container {
                                justify-content: center;
                            };
                        }
                        .detailed-info {
                            .block-retention {
                                margin-bottom: 2rem;
                            }
                        }
                    }
                    &.second {
                        .app-second {
                            padding: 6rem 1.5rem 2rem 1.5rem;
                            width: calc(100vw - 3rem);

                            .app-detail-container {
                                .smartphone-container {
                                    width: 55vw;
                                    left: -40vw;
                                    top: 3vh;
                                    .smartphone {
                                        width: 55vw;
                                        height: calc(55vw * 2.03);
                                        .content {
                                            width: calc(102% - 30px);
                                            height: calc(102% - 30px);
                                            img {
                                                border-radius: 20px;
                                            }
                                        }
                                    }
                                }
                                .app-explain-container {
                                    h2 {
                                        font-size: 1.5rem;
                                        padding-left: 0;
                                    }
                                    .explain-container {
                                        padding: 1rem 1rem 1rem calc(8vw + 3rem);
                                        .main-content {
                                            height: 54vh;

                                            .part {
                                                h3 {
                                                    font-size: 1rem;
                                                    margin-bottom: 1rem;
                                                }

                                                p {
                                                    line-height: 1.5em;

                                                    &.last {
                                                        display: none;
                                                    }
                                                }
                                                &:nth-child(1), &:nth-child(2), &:nth-child(3)   {
                                                    .cta-container {
                                                        display: none;
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
                &.for-approach {
                    .associes-container {
                        .associe {
                            width: 90% !important;
                            max-width: 350px;
                            .flip-card-container {
                                .flip-card-inner {
                                    .flip-card-back {
                                        .pic-container {
                                            .overview {
                                                font-size: .9rem;
                                                p {
                                                    line-height: 1.3em;
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
@media (max-width: 490px) {

}