.breadcrumb {
    display: none;
}

.hero {
    padding-top: var(--sp-6);
    padding-left: var(--sp-2);
    padding-right: var(--sp-2);
    background-color: var(--color-light);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
    position: relative;

    .hero__highlight {
        color: var(--color-blue-600);
    }

    .hero__clouds {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        right: 50%;

        width: 100%;
        max-width: calc(952px + 36px);
        transform: translateX(-50%);

        .hero__cloud-1,
        .hero__cloud-2,
        .hero__cloud-3,
        .hero__cloud-4,
        .hero__cloud-5 {
            position: absolute;
            background: url("../../../../Media/Front/Global/Homepage/delayed-cloud.png") top/contain no-repeat;
            opacity: 0.5;

        }
        .hero__cloud-1, .hero__cloud-3 {
            width: 300px;
            height: 200px;
        }
        .hero__cloud-2, .hero__cloud-4 {
            width: 250px;
            height: 150px;
            transform: scaleX(-1);
        }

        .hero__cloud-5 {
            width: 150px;
            height: 100px;
            transform: scaleX(-1);
        }

        .hero__cloud-1 {
            bottom: 15%;
            left: -40%;
        }
        .hero__cloud-2 {
            top: 1%;
            left: -20%;
        }
        .hero__cloud-3{
            top: 15%;
            right: -17%;
        }
        .hero__cloud-4{
            bottom: 25%;
            right: -30%;
        }
        .hero__cloud-5{
            top: 20%;
            left: 45%;

            @media screen and (max-width: 768px) {
                top: 30%;
                left: 0%;
            }
        }

    }

    .hero__top {
        width: 100%;
        max-width: calc(952px + 36px);
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: stretch;

        .hero__content {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            gap: var(--sp-3);

            .hero__infos {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: flex-start;
                gap: var(--sp-4);
            }

            .hero__title {
                font-size: 42px;
                font-style: normal;
                font-weight: 600;
                line-height: normal;
                color: var(--color-blue-800);
            }
            .hero__baseline {
                font-size: 20px;
                font-style: normal;
                font-weight: 500;
                line-height: normal;

                &.hero__baseline--highlight {
                    font-size: 18px;
                    font-weight: 600;
                }
            }
            .hero__tips {
                display: none;
            }
        }

        .hero__mascot {
            min-width: 320px;
            display: flex;
            align-items: center;
            justify-content: right;
        }
    }

    .hero__form {
        width: 100%;
        max-width: calc(952px + 36px);
        margin: 0 auto;
        padding: var(--sp-2);
        background-color: var(--color-blue-100);
        border-radius: var(--sp-4);

        @media screen and (max-width: 768px){
            border-radius: var(--sp-3);
        }

        .hero__form__baseline {
            display: none;
        }
    }

    .hero__bottom {
        width: 100%;
        max-width: calc(952px + 36px);
        margin: 0 auto;

        .hero__tips {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: var(--sp-3);

            .hero__tip {
                display: flex;
                padding: 16px;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                font-weight: 500;
            }
        }
    }

    .hero__carousel {
        max-width: calc(1088px + 36px);
        margin: var(--sp-4) auto var(--sp-3);
    }
}
@media (max-width: 768px) {
    .hero {
        padding-top: var(--sp-3);
        .hero__top {
            .hero__content {
                gap: var(--sp-2);
                align-items: center;

                .hero__reviews {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-bottom: var(--sp-2);
                    width: 100%;
                }
                .hero__infos {
                    text-align: center;
                    align-items: center;
                    justify-content: center;
                    gap: var(--sp-2);
                }
                .hero__title {
                    font-size: var(--sp-3);
                    font-weight: 500;
                }
                .hero__baseline {
                    font-size: 14px;
                    font-weight: 500;

                    &.hero__baseline--highlight {
                        font-size: 14px;
                        font-weight: 500;
                    }

                    &.hero__baseline--sm-hidden {
                        display: none;
                    }
                }
                .hero__tips {
                    display: flex;
                    gap: var(--sp-2);
                    font-size: 14px;
                }
            }
            .hero__mascot {
                justify-content: center;
                margin-top: var(--sp-3);
            }
        }

        .hero__top {
            flex-direction: column;
        }

        .hero__bottom {
            display: none;
        }

        .hero__form {
            margin-top: -175px;

            .hero__form__baseline {
                display: block;
                font-size: 14px;
                font-weight: 600;
                margin-bottom: var(--sp-2);
                text-align: center;
            }
        }
    }
}

.money-card {
    padding: var(--sp-6);
    border-radius: var(--sp-4);
    border: 2px solid #FFF;
    background: linear-gradient(96deg, var(--color-pink-50) 2.14%, #EEF1FE 100%);
    box-shadow: 8px 16px 20px 0 rgba(73, 85, 195, 0.10);

    .money-card__body {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: var(--sp-4);
    }
    .money-card__pre-title {
        display: flex;
        padding: var(--sp-1) var(--sp-2);
        justify-content: center;
        align-items: center;
        gap: var(--sp-1);
        color: #5E699A;
        text-transform: uppercase;
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        border-radius: var(--sp-2);
        border: 1px solid #FFF;
        background: linear-gradient(112deg, rgba(255, 255, 255, 0.50) 3.55%, rgba(255, 255, 255, 0.20) 26.49%, rgba(255, 255, 255, 0.30) 94.42%);
        box-shadow: 25px 30px 100px 0 rgba(73, 85, 195, 0.10);
        backdrop-filter: blur(2.5px);
    }
    .money-card__title {
        color: var(--color-blue-800);
        font-size: 36px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        margin-bottom: var(--sp-1);
    }
    .money-card__text {
        max-width: 515px;
        margin: 0 auto;
        text-align: center;
    }

    .money-card__list {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
        width: 100%;
        max-width: 570px;

        .money-card__item {
            flex: 1;
            display: flex;
            padding: 16px;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: var(--sp-1)/2;

            border-radius: var(--sp-2);
            background-color: var(--color-light);
            /*border: 2px solid #FFF;*/
            /*box-shadow: inset -5px -5px 5px rgba(255, 255, 255, 0.5), inset 5px 5px 5px rgba(125, 125, 125, 0.05);*/

            .money-card__item-title {
                font-size: 32px;
                font-weight: 600;
                line-height: normal;
                color: var(--color-blue-600);
            }
            .money-card__item-text {
                font-size: 15px;
                font-weight: 400;
                line-height: normal;
                color: #5E699A;
            }
        }
    }
}

@media (max-width: 768px) {
    .money-card{
        padding: var(--sp-4) var(--sp-2);

        .money-card__title{
            font-size: var(--sp-3);
            text-align: center;
            margin-bottom: var(--sp-2);
        }
        .money-card__text{
            font-size: 14px;
        }
        .money-card__list {
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: var(--sp-1);
            max-width: 100%;
            width: 100%;

            .money-card__item {
                display: flex;
                padding: 16px;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                gap: var(--sp-2);
                width: 100%;
                max-width: 270px;

                border-radius: var(--sp-6);

                .money-card__item-title {
                    font-size: var(--sp-3);
                }
                .money-card__item-text {
                    font-size: 14px;
                }
            }
        }
        .money-card__footer {
            display: none;
        }
    }
}

.card--homepage-experts {
    background: url("../../../../Media/Front/Global/Homepage/delayed-experts-background.jpg") center no-repeat;
    background-size: cover;
    overflow: hidden;

    .card__bubble {
        padding: 8px 16px;
        border-radius: 9999px;
        border: 1px solid #FFF;
        box-shadow: inset -5px -5px 5px rgba(255, 255, 255, 0.5), inset 5px 5px 5px rgba(125, 125, 125, 0.05);
        font-weight: 600;
        font-size: 16px;
        width: fit-content;
        backdrop-filter: blur(14px) saturate(120%);
        -webkit-backdrop-filter: blur(14px) saturate(120%);
        margin-bottom: var(--sp-4);

        .card__bubble--highlight {
            color: var(--color-blue-600);
        }
    }

    .card__team {
        display: flex;
        align-items: center;
        gap: -5px;

        .card__team-item {
            width: 52px;
            height: 52px;
            aspect-ratio: 1/1;
            border-radius: 16px;
            border: 1px solid #F5F7FE;
            margin-bottom: var(--sp-2);

            &.card__team-item--1 {
                background: url("../../../../Media/Front/Global/Homepage/delayed-team-1.jpg") lightgray 50% / cover no-repeat;
            }
            &.card__team-item--2 {
                background: url("../../../../Media/Front/Global/Homepage/delayed-team-2.jpg") lightgray 50% / cover no-repeat;
                margin-left: -5px;
            }
            &.card__team-item--3 {
                background: url("../../../../Media/Front/Global/Homepage/delayed-team-3.jpg") lightgray 50% / cover no-repeat;
                margin-left: -5px;

            }
        }
    }

    .card__body {
        padding: var(--sp-5);

        .card__title {
            margin-bottom: var(--sp-2);
            color: var(--color-blue-800);
        }

        .card__btn {
            margin-top: var(--sp-4);
        }
    }
}


.card--homepage-fees {
    background: url("../../../../Media/Front/Global/Homepage/delayed-informations-fees-background.jpg") center no-repeat;
    background-size: cover;
    color: var(--color-light);
    overflow: hidden;

    &:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #000;
        opacity: .4;
    }

    .card__bubble{
        --bg: rgba(74,40,30,.65);
        --stroke1: rgba(255,255,255,.55);
        --stroke2: rgba(255,200,180,.25);

        padding: 8px 16px;
        border-radius: 9999px;
        border: 1px solid transparent;
        color:#fff;
        font-weight: 600;
        font-size: 16px;
        width: fit-content;
        background:
                linear-gradient(var(--bg), var(--bg)) padding-box,
                linear-gradient(145deg, var(--stroke1), transparent 40%, var(--stroke2)) border-box;

        box-shadow:
                inset 0 1px 0 rgba(255,255,255,.45),
                inset 0 -16px 28px rgba(0,0,0,.35),
                0 6px 20px rgba(0,0,0,.25);
    }

    .card__body {
        padding: var(--sp-5);

        .card__title {
            margin-top: auto;
            margin-bottom: var(--sp-2);
        }

        .card__btn {
            margin-top: var(--sp-4);
        }
    }
}


.scrollcard {
    padding: var(--sp-4);
    border-radius: var(--sp-4);
    border: 2px solid #FFF;
    background: linear-gradient(96deg, var(--color-pink-50) 2.14%, #EEF1FE 100%);
    box-shadow: 8px 16px 20px 0 rgba(73, 85, 195, 0.10);

    display: flex;
    gap: 64px;

    .scrollcard__items-list {
        display: flex;
        flex-direction: column;

        .scrollcard__item {
            display: flex;
            padding: 16px;
            flex-direction: column;
            align-items: flex-start;
            gap: 4px;
            align-self: stretch;
            border-radius: 16px;
            transition: background 0.3s ease, color 0.3s ease;

            .scrollcard__item-step {
                border-radius: 8px;
                background: #FFF;
                padding: 4px 8px;
                transition: background 0.3s ease, color 0.3s ease;
            }
            .scrollcard__item-title {
                color: var(--color-blue-800);
                font-size: 20px;
                font-weight: 600;
                line-height: normal;
                transition: background 0.3s ease, color 0.3s ease;
            }
            .scrollcard__item-text {
                color: var(--color-blue-900);
                font-size: 14px;
                font-weight: 400;
                line-height: 22px;
            }
            .scrollcard__item-image {
                display: none;
            }

            &.scrollcard__item--active {
                background: #FFF;
                color: var(--color-blue-800);

                .scrollcard__item-step {
                    background: var(--color-blue-600);
                    color: var(--color-light);
                }
                .scrollcard__item-title {
                    color: var(--color-blue-600);
                }
            }
        }
    }

    .scrollcard__image {
        width: 53%;
        flex-shrink: 0;

        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        border-radius: var(--sp-4);
        overflow: hidden;

        display: flex;
        align-items: end;
        justify-content: center;
        padding: var(--sp-4);

        .scrollcard__image-layer {
            position: absolute;
            inset: 0;
            background-size: cover;
            background-position: center;
            opacity: 0;
            transition: opacity 0.45s ease;   /* le fondu */
            will-change: opacity;
        }
        .scrollcard__image-layer.is-visible {
            opacity: 1;
        }


        .scrollcard__image-info {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 10px;
            padding: var(--sp-2);
            border-radius: 28px;
            background: rgba(0, 0, 0, 0.20);
            font-size: 14px;
            font-style: normal;
            font-weight: 600;
            line-height: normal;
            color: var(--color-light);
            justify-content: center;
            backdrop-filter: blur(6px);
        }
    }
}

@media (max-width: 991px) {
    .scrollcard-mobile-background {
        background: linear-gradient(180deg, #FFF 0%, #E7EEFE 40%, #FFF 90%);
    }

    .scrollcard {
        padding: 0;
        background: transparent;
        box-shadow: none;
        border: 0;
        border-radius: 0;
        flex-direction: column;
        gap: 0;

        .scrollcard__items-list {
            gap: var(--sp-2);

            .scrollcard__item {
                gap: 16px;

                border-radius: 24px;
                border: 2px solid #FFF;

                background: var(--color-light);
                box-shadow: 5px 10px 20px 0 rgba(73, 85, 195, 0.10);

                .scrollcard__item-step {
                    display: none;
                }

                &.scrollcard__item--active {
                    .scrollcard__item-title {
                        color: var(--color-blue-800);
                    }
                }
            }
        }

        .scrollcard__image {
            display: none;
        }
    }
}
@media (max-width: 768px) {
    .scrollcard {
        .scrollcard__items-list {
            .scrollcard__item {
                .scrollcard__item-image {
                    display: block;
                    border-radius: var(--sp-2);
                    margin-bottom: var(--sp-2);
                }
            }
        }
    }
}


.card__home-list {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    gap: 16px;
    align-self: stretch;
    flex-wrap: wrap;
    margin: var(--sp-4) 0;

    a {
        padding: 4px 12px;
        border-radius: var(--sp-1);
        background-color: var(--color-light);
        font-weight: 500;
        display: block;
        transition: transform var(--transition);

        &:hover {
            transform: scale(1.05) rotate(2deg);
        }
    }
}