main {
    display: flex;
    flex-wrap: wrap;
    position: relative;
}

/* hero */
.hero-wrapper {
    height: 100vh;
    background-color: var(--darkBlue);
    padding: 0 8vw;
    position: relative;

    .real-hero {
        width: 100%;
        height: 100vh;
        display: flex;
        padding: 0;
        gap: 8vh;
        position: relative;
        flex-wrap: wrap;
        align-content: center;
        h1 {
            display: flex;
            flex-wrap: wrap;
            margin: 0;
            font-weight: 700;
            font-size: 4vw;
            color: #fff;
            line-height: 1.1em;
            span {
                display: flex;
                width: 100%;
                transition: opacity .5s ease-in-out 0s;
                &:nth-child(1) {
                    color: var(--actionBlue);
                    transform: translateX(-100vw);
                    transition: transform 1.4s ease-in-out .1s;
                    opacity: 0;
                    &.revealed {
                        transform: translateX(0);
                        opacity: 1;
                    }
                }
                &:nth-child(2) {
                    transform: translateX(-100vw);
                    opacity: 0;
                    transition: transform 1.4s ease-in-out .6s;
                    &.revealed {
                        transform: translateX(0);
                        opacity: 1;
                    }
                }
                &:nth-child(3) {
                    transform: translateX(-100vw);
                    opacity: 0;
                    transition: transform 1.4s ease-in-out .9s;
                    &.revealed {
                        transform: translateX(0);
                        opacity: 1;
                    }
                }
            }
        }
        .cta-hero {
            position: absolute;
            opacity: 0;
            transition: opacity .5s ease-in-out 1.4s;
            right: 0;
            bottom: 6rem;
            z-index: 3;
            &.revealed {
                opacity: 1;
            }
        }
        .welcome {
            width: 100%;
            display: flex;
            gap: 2rem;
            opacity: 0;
            transform: translateY(-5vh);
            transition: all .5s ease-in-out 1.4s;
            ul {
                font-size: 1.4rem;
                line-height: 1.7em;
                margin: 0;
                color: #fff;
                width: 70%;
                li {
                    &::marker {
                        color: blue;
                        font-size: 1.4em;
                    }
                }
            }
            &.revealed {
                transform: translateY(0);
                opacity: 1;
            }
        }
        .illus {
            position: absolute;
            top: 5rem;
            right: 0;
            width: 35vw;
            height: 50vh;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            padding: 5rem 0 5rem 0;
            img {
                width: 70%;
            }
        }
    }

    .sep {
        width: 20%;
        height: 5rem;
        border-radius: 0 3rem 3rem 0;
        background-color: var(--actionBlue);
        position: absolute;
        left: 0;
        bottom: -2.5rem;
    }
}

.problematique {
    padding: 5rem 8vw 0 5rem;
    position: relative;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    h2 {
        display: flex;
        width: 40%;
        font-weight: 700;
        font-size: 2rem;
        line-height: 1.1em;
        margin: 0 0 2rem 0;
    }
    ul {
        font-size: 1.3rem;
        line-height: 1.8em;
        margin: 0;
        color: #000;
        width: 60%;
        li {
            &::marker {
                color: blue;
                font-size: 1.5em;
            }
        }
    }
    p {
        color: #F15F60;
        font-size: 1.5rem;
        font-weight: bold;
        width: 100%;
    }
}

.solution {
    padding: 3rem 8vw 0 5rem;
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    h2 {
        display: flex;
        width: 100%;
        font-weight: 700;
        font-size: 2rem;
        line-height: 1.1em;
        margin: 0 0 2rem 0;
        align-items: center;
        justify-content: center;
        span {
            background-color: #F15F60;
            border-radius: 1rem;
            padding: .5rem 1rem;
            margin: 0 .8rem;
            color: #fff;
        }
    }
    ul {
        font-size: 1.3rem;
        line-height: 1.8em;
        margin: 0;
        color: #000;
        width: 70%;
        li {
            &::marker {
                color: blue;
                font-size: 1.4em;
            }
        }
    }
}
.sep-line-container {
    width: 100%;
    display: flex;
    padding: 4rem;
    align-items: center;
    justify-content: center;
    span {
        display: inline-flex;
        height: 4px;
        width: 300px;
        background-color: var(--actionBlue);
        border-radius: 10px;
    }
}
.profils {
    padding: 0 8vw 0 5rem;
    position: relative;
    display: flex;
    align-items: center;
    gap: 2rem;
    justify-content: space-between;
    h3 {
        display: flex;
        width: 100%;
        font-weight: 700;
        font-size: 2rem;
        line-height: 1.1em;
        margin: 0 0 1rem 0;
        align-items: center;
    }
    p {
        margin: 0;
        line-height: 1.5em;
        span {
            font-weight: bold;
        }
    }
    .left {
        width: 30%;
    }
    .right {
        width: 30%;
    }
}

.emotions-game {
    width: 100%;
    padding: 5rem 8vw 0 5rem;
    display: flex;
    justify-content: center;
    .guide-title {
        display: flex;
        width: 20%;
        align-items: flex-start;
        justify-content: flex-end;
        position: relative;
        right: -2rem;
        img {
            margin: 3rem 0 0 0;
            width: 100%;
        }
    }
    .guide {
        display: flex;
        width: 25%;
        align-items: flex-start;
        justify-content: center;
        img {
            width: 100%;
        }
    }
    .name {
        display: flex;
        width: 20%;
        align-items: flex-end;
        justify-content: flex-start;
        position: relative;
        left: -2rem;
        span {
            font-weight: bold;
            line-height: 1.1em;
            position: relative;
            margin: 0 0 5rem 0;
        }
    }
}

.summary {
    padding: 3rem 8vw 0 5rem;
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    h2 {
        display: flex;
        width: 100%;
        font-weight: 700;
        font-size: 2rem;
        line-height: 1.1em;
        margin: 0 0 2rem 0;
        align-items: center;
        justify-content: center;
        span {
            background-color: #F15F60;
            color: #fff;
            border-radius: 1rem;
            padding: .5rem 1rem;
            margin: 0 .8rem;
        }
    }
    .list-container {
        width: 100%;
        display: flex;
        align-items: start;
        justify-content: center;
        gap: 2rem;
        .list {
            display: flex;
            flex-wrap: wrap;
            width: 35%;
            .item {
                width: 100%;
                margin: 0 0 .5rem 0;
                span {
                    display: inline-flex;
                    &:nth-child(1) {
                        font-weight: bold;
                        font-size: 1.3em;
                        width: 2.5rem;
                    }
                    &:nth-child(2) {
                        width: calc(100% - 2.5rem);
                    }
                }
            }
        }
    }
}

.example {
    margin: 7rem 0 0 0;
    position: relative;
    display: flex;
    background-color: #E1EAFF;
    .container {
        width: 100%;
        padding: 0 8vw;
        position: relative;
        display: flex;
        flex-wrap: wrap;
        .focus {
            background-color: #E1EAFF;
            height: 5rem;
            width: auto;
            position: relative;
            margin-top: -3rem;
            display: flex;
            padding: 0 3rem;
            border-radius: 3rem 3rem 0 0;
            font-size: 1.2rem;
            align-items: center;
            color: #648AE2;
            font-weight: bold;
        }
        .content {
            width: 100%;
            padding: 2rem 3rem 4rem 3rem;
            display: flex;
            flex-wrap: wrap;
            .intro {
                width: 50%;
                h3 {
                    font-weight: bold;
                    font-size: 2.5rem;
                    line-height: 1.1em;
                    margin: 0 0 2rem 0;
                }
                .objectifs {
                    display: flex;
                    flex-wrap: wrap;
                    gap: 1rem;
                    span {
                        width: 100%;
                        display: flex;
                        color: #000;
                        font-weight: bold;
                        font-size: 1.2rem;
                    }
                    ul {
                        line-height: 1.5em;
                        margin: 0;
                        width: 70%;
                        font-size: 1rem;
                        li {
                            &::marker {
                                color: blue;
                                font-size: 1.4em;
                            }
                        }
                    }
                }
            }
            .illus {
                width: 50%;
                text-align: right;
                img {
                    width: 100%;
                    position: relative;
                    top: -7rem;
                }
            }
            .details {
                width: 100%;
                margin: -2rem 0 4rem 0;
                display: flex;
                flex-wrap: wrap;
                gap: 1rem;
                .item {
                    width: 100%;
                    span {
                        display: inline-flex;
                        &:nth-child(1) {
                            background-color: #B5C9F9;
                            border-radius: 1rem;
                            padding: .3rem 1rem;
                            margin: 0 .2rem 0 0;
                            font-weight: bold;
                        }
                    }
                }
            }
            .instructions {
                display: flex;
                flex-wrap: wrap;
                gap: 1rem;
                span {
                    width: 100%;
                    display: flex;
                    color: #000;
                    font-weight: bold;
                    font-size: 1.2rem;
                }
                p {
                    margin: 0;
                }
                ul {
                    line-height: 1.5em;
                    margin: 0;
                    width: 70%;
                    font-size: 1rem;
                    li {
                        &::marker {
                            color: blue;
                            font-size: 1.4em;
                        }
                    }
                }
            }
        }
    }
}

.campaign {
    width: 100%;
    padding: 4rem 8vw 0 8vw;
    display: flex;
    justify-content: center;
    .container {
        width: 70%;
        display: flex;
        .conclusion {
            width: 70%;
            padding: 0;
            h4 {
                font-weight: bold;
                font-size: 2rem;
                display: flex;
                flex-wrap: wrap;
                line-height: 1.2em;
                margin: 0 0 2rem 0;
                justify-content: center;
                span {
                    display: flex;
                    justify-content: center;
                    &:nth-child(2) {
                        background-color: #F15F60;
                        color: #fff;
                        display: inline-flex;
                        border-radius: 1rem;
                        padding: .5rem 1rem;
                        margin: 0 .8rem;
                    }
                }
            }
            .powered {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                span {
                    width: 100%;
                    text-align: center;
                }
                .logo {
                    display: flex;
                    width: 200px;
                }
            }
        }
        .illus {
            width: 30%;
            img {
                width: 100%;
                position: relative;
                top: -8rem;
            }
        }
    }
}

.tarif {
    width: 100%;
    padding: 0 8vw 4rem 8vw;
    display: flex;
    justify-content: center;
    .container {
        width: 70%;
        display: flex;
        align-items: center;
        justify-content: center;
        .pro {
            width: 40%;
            display: flex;
            flex-wrap: wrap;
            span {
                display: block;
                width: 100%;
                text-align: center;
                &:nth-child(2) {
                    font-weight: bold;
                    font-size: 1.3em;
                    padding: 0 .5rem;
                }
            }
        }
        .public {
            width: 40%;
            display: flex;
            flex-wrap: wrap;
            span {
                text-align: center;
                width: 100%;
                display: block;
                &:nth-child(2) {
                    font-weight: bold;
                    font-size: 1.3em;
                    padding: 0 .5rem;
                }
            }
        }
    }
}

.cta-container {
    width: 100%;
    display: flex;
    padding: 0 8vw;
    justify-content: center;
}



/* ##################################################################################################### */
/* ##################################  R E S P O N S I V E  ############################################ */
/* ##################################################################################################### */
/* Ecrans larges */
@media (max-height: 768px) and (min-width: 1366px) {
    .hero-wrapper {
        .real-hero {
            h1 {
                font-size: 3rem;
            }
        }
    }
}
/* Small Laptops */
@media screen and (min-width: 1024px) and (max-width: 1366px) {

}
@media (max-width: 1600px) {
    .hero-wrapper {
        .real-hero {
            h1 {
                font-size: 3.5rem;
            }
            .welcome {
                ul {
                    font-size: 1.1rem;
                    line-height: 1.7rem;
                }
            }
        }
    }
    .problematique {
        ul {
            font-size: 1.1rem;
            line-height: 1.7rem;
        }
    }
    .solution {
        ul {
            font-size: 1.1rem;
            line-height: 1.7rem;
        }
    }
}
@media (max-width: 1366px) {
    .hero-wrapper {
        padding: 0 6vw;
        height: auto;

        .real-hero {
            height: auto;
            align-content: center;
            gap: 5vh;
            padding-bottom: 15vh;
            padding-top: 25vh;
            h1 {
                font-size: 3rem;
            }
            .illus {
                top: 6rem;
            }
            .cta-hero {
                bottom: 4rem;
                right: 2rem;
            }
        }
    }
}
@media (max-width: 1199px) {
    .hero-wrapper {
        padding: 0 5vw;
        height: auto;
    }
    .problematique {
        padding: 5rem 5vw 0 5vw
    }
    .solution {
        padding: 3rem 5vw 0 5vw;
        ul {
            width: 100%;
        }
    }
    .profils {
        padding: 0 5vw 0 5vw;
        align-items: flex-start;
        .left {
            width: 45%;
        }
        .right {
            width: 45%;
        }
    }
    .emotions-game {
        padding: 5rem 5vw 0 5vw;
        .guide-title {
            width: 25%;
        }
        .guide {
            width: 35%;
        }
        .name {
            width: 25%;
        }
    }
    .summary {
        padding: 3rem 5vw 0 5vw;
        .list-container {
            justify-content: space-between;
            .list {
                width: 45%;
            }
        }
    }
    .example {
        .container {
            padding: 0 5vw;
            .content {
                padding: 2rem 0 4rem 0;
                .illus {
                    img {
                        top: inherit;
                    }
                }
                .details {
                    margin-top: 3rem;
                }
            }
        }
    }
    .campaign {
        padding: 4rem 5vw 0 5vw;
        .container {
            width: 100%;
        }
    }
    .tarif {
        padding: 0 5vw 4rem 5vw;
        .container {
            width: 100%;
        }
    }
}
@media (max-width: 991px) {
    .hero-wrapper {
        .real-hero {
            h1 {
                font-size: 2.5rem;
                line-height: 1.5em;
            }
        }
    }
    .problematique {
        h2 {
            font-size: 1.5rem;
        }
    }
    .solution {
        h2 {
            font-size: 1.5rem;
        }
    }
    .profils {
        h3 {
            font-size: 1.5rem;
        }
    }
    .summary {
        h2 {
            font-size: 1.5rem;
        }
    }
    .example {
        .container {
            .content {
                .intro {
                    h3 {
                        font-size: 2rem;
                    }
                }
            }
        }
    }
    .campaign {
        .container {
            .conclusion {
                h4 {
                    font-size: 1.5rem;
                }
            }
        }
    }
}
@media (max-width: 767px) {
    .hero-wrapper {
        .real-hero {
            flex-wrap: wrap;
            padding-bottom: 10vh;
            justify-content: center;
            .illus {
                width: 100%;
                position: relative;
                top: inherit;
                right: inherit;
                justify-content: center;
                height: auto;
                padding: 0;
                img {
                    width: 250px;
                }
            }
            .cta-hero {
                position: relative;
                top: inherit !important;
                bottom: inherit !important;
                right: inherit !important;
            }
            .welcome {
                width: 100%;
                ul {
                    width: 100%;
                }
            }
        }
    }
    .problematique {
        h2 {
            width: 100%;
        }
        ul {
            width: 100%;
        }
    }
    .solution {
        h2 {
            flex-wrap: wrap;
            line-height: 1.5em;
        }
    }
    .profils {
        flex-wrap: wrap;
        .left, .right {
            width: 100%;
        }
    }
    .emotions-game {
        flex-wrap: wrap;
        .guide-title {
            right: inherit;
            width: 100%;
            justify-content: center;
            img {
                width: 250px;
            }
        }
        .guide {
            width: 100%;
            justify-content: center;
            img {
                width: 250px;
            }
        }
        .name {
            left: inherit;
            text-align: center;
            span {
                margin: 0;
            }
        }
    }
    .summary {
        h2 {
            flex-wrap: wrap;
            text-align: center;
        }
        .list-container {
            flex-wrap: wrap;
            .list {
                width: 100%;
            }
        }
    }
    .example {
        .container {
            .content {
                flex-wrap: wrap;
                .intro {
                    width: 100%;
                    h3 {
                        width: 100%;
                    }
                    .objectifs {
                        ul {
                            width: 100%;
                        }
                    }
                }
                .illus {
                    width: 100%;
                    text-align: center;
                    margin: 2rem 0;
                    img {
                        top: inherit;
                        width: 80%;
                    }
                }
                .instructions {
                    ul {
                        width: 100%;
                    }
                }
            }
        }
    }
    .campaign {
        .container {
            flex-wrap: wrap;
            .conclusion {
                width: 100%;
                h4 {
                    text-align: center;
                    font-size: 1.3rem;
                }
            }
            .illus {
                width: 100%;
                text-align: center;
                margin: 2rem;
                img {
                    width: 100px;
                    top: inherit;
                }
            }
        }
    }
    .tarif {
        .container {
            flex-wrap: wrap;
            .public, .pro {
                width: 100%;
            }
            .public {
                margin-bottom: 2rem;
            }
        }
    }
}
@media (max-width: 650px) {

}
@media (max-width: 550px) {
    .hero-wrapper {
        .real-hero {
            padding-top: 15vh;
            h1 {
                font-size: 2rem;
            }
            .welcome {
                font-size: 1.1rem;
            }
        }
        .sep {
            height: 3rem;
            width: 25%;
            bottom: -1.5rem;
        }
    }
}