:root {
    /* Fonts */
    --main-font: "Lexend Deca", sans-serif;

    /* Fonts weight */
    --verylight: 200;
    --light: 300;
    --regular: 400;
    --medium: 500;
    --semibold: 600;
    --bold: 700;
    --extrabold: 800;

    /* Colors */
    --white: #ffffff;
    --dark: #000000;
    --grey: #f0f0f0;

    --blue: #006aaf;
    --blue-rgba-16: rgba(0, 106, 175, 0.16);
    --blue-rgba-33: rgba(0, 106, 175, 0.33);
    --hover: #0088eb;

    /* Others */
    --border-radius: 8px;
    --transition: all 0.3s ease;
}

h1,
.h1_like,
h2,
h2_like,
h3,
.h3_like,
h4,
.h4_like {
    font-weight: var(--bold);
}

h1:has(+p),
.h1_like:has(+.p),
h2:has(+p),
.h2_like:has(+.p),
h3:has(+p),
.h3_like:has(+.p),
h4:has(+p),
.h4_like:has(+p) {
    margin-bottom: 20px;
}

.section__title:has(h1),
.section__title:has(.h1_like),
.section__title:has(h2),
.section__title:has(.h2_like),
.section__title:has(h3),
.section__title:has(.h3_like),
.section__title:has(h4),
.section__title:has(.h4_like) {
    margin-bottom: 40px;
}

.section__title:has(h1+p),
.section__title:has(.h1_like+p),
.section__title:has(h2+p),
.section__title:has(.h2_like+p),
.section__title:has(h3+p),
.section__title:has(.h3_like+p),
.section__title:has(h4+p),
.section__title:has(.h4_like+p) {
    margin-bottom: 20px;
}

h1,
.h1_like {
    font-family: var(--main-font);
    font-size: 38px;
    line-height: 46px;
    font-weight: var(--bold);

    @media (min-width: 992px) {
        font-size: 60px;
        line-height: 68px;
    }
}

h2,
.h2_like {
    font-family: var(--main-font);
    font-size: 30px;
    line-height: 38px;
    font-weight: var(--bold);

    @media (min-width: 992px) {
        font-size: 40px;
        line-height: 48px;
    }
}

h3,
.h3_like {
    font-family: var(--main-font);
    font-size: 20px;
    line-height: 28px;
    font-weight: var(--semibold);
}

p,
li {
    font-family: var(--main-font);
    font-size: 16px;
    line-height: 32px;
    font-weight: var(--light);

    &:not(.menu-item) {
        margin-bottom: 10px;
    }
}

strong {
    font-weight: var(--bold);
}

a {
    color: var(--blue);
    text-decoration: none;
    -webkit-transition: var(--transition);
    transition: var(--transition);
}

a:hover {
    color: var(--dark-blue);
}

.cta:not(.menu-item),
.menu-item.cta>a {
    display: flex;
    align-items: center;
    text-align: center;
    padding: 10px 15px;
    color: var(--white);
    transition: var(--transition);
    width: fit-content;
    position: relative;
    z-index: 3;

    &:before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background: var(--blue);
        top: 0;
        left: 0;
        transition: var(--transition);
        z-index: -1;
    }

    &:after {
        content: '';
        position: absolute;
        width: 0%;
        height: 100%;
        background: var(--hover);
        top: 0;
        left: 0;
        transition: var(--transition);
        z-index: -2;
    }

    @media (max-width: 991px) {
        line-height: 22px;
        padding: 15px 10px;
    }

    &:hover {
        background: transparent;

        &:before {
            z-index: -3;
        }

        &:after {
            width: 100%;
        }
    }
}

.cta>.bouton {
    color: var(--white);
    font-weight: var(--medium);

    @media (max-width: 991px) {
        line-height: 22px;
    }
}

.cta:has(.bouton + .bouton) {
    display: flex;
    width: fit-content;
    gap: 8px;
    flex-wrap: wrap;

    @media (max-width: 991px) {
        .bouton {
            margin-right: auto;
            margin-left: auto;
        }
    }
}

.bouton+.bouton,
.bouton--alt {
    text-decoration: none;
    display: inline-block;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: var(--semibold);
    transition: var(--transition);
    border-radius: var(--border-radius);
    background: var(--blue);
    border: 1px solid var(--blue);
    color: var(--white);

    &:hover {
        background-color: var(--dark-blue);
        border: 1px solid var(--dark-blue);
    }
}

@media (min-width: 992px) {
    .hdp__intro {
        .cta:has(.bouton + .bouton) {
            .bouton {
                margin-right: auto;
                margin-left: auto;
            }
        }
    }
}

[data-color="#ffffff"] {
    background: #ffffff;
    position: relative;
}

[data-color="#006aaf"] {
    background: #006aaf;
    position: relative;

    &:after {
        content: '';
        position: absolute;
        top: 0px;
        left: 0px;
        background-image: url('../../img/bg_dot_blue.svg');
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 1;
        background-size: auto;

        @media (min-width: 992px) {
            background-repeat: no-repeat;
            background-size: cover;
        }
    }

    &.infos_and_form {
        .container {
            &:after {
                top: 80%;
            }
        }
    }

    .container:first-child {
        position: relative;
        z-index: 2;

        &:after {
            background: rgba(255, 255, 255, 0.08);
        }

        .cta {
            background: var(--white);

            a {
                color: var(--dark);
            }

            &:hover {
                background: var(--dark);

                a {
                    color: var(--white);
                }
            }
        }

        .section__title p {
            opacity: 0.66;
        }
    }

    li {
        &::before {
            background: var(--white) !important;
        }
    }
}

[data-color="#000000"] {
    background: #000000;
    position: relative;
    z-index: -2;
    overflow: hidden;
    
    &:not(.cpt) {
        @media (min-width: 768px) {
            &:before {
                content: '';
                position: absolute;
                top: -13vh;
                right: -13vw;
                width: 640px;
                height: 640px;
                background: rgba(0, 106, 175, 0.15);
                z-index: -1;
                border-radius: 50%;
            }
        }

        &:after {
            content: '';
            position: absolute;
            top: 0px;
            left: 0px;
            background-image: url('../../img/bg_dot_blue.svg');
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
            filter: brightness(1) grayscale(1);
            opacity: 0.7;
            background-size: auto;

            @media (min-width: 992px) {
                background-repeat: no-repeat;
                background-size: cover;
            }
        }

        &.infos_and_form {
            .container {
                &:after {
                    top: 80%;
                }
            }
        }

        .container:first-child {
            position: relative;
            z-index: -2;

            &:after {
                content: '';
                background: rgba(255, 255, 255, 0.08);
                width: 300px;
                height: 300px;
                top: 50%;
                left: 50%;
                transform: translate(-50%);
                position: absolute;
                border-radius: 50%;
                pointer-events: none;

                @media (min-width: 768px) {
                    width: 640px;
                    height: 640px;
                }
            }

            .cta {
                background: var(--white);

                a {
                    color: var(--dark);
                }

                &:hover {
                    background: var(--blue);

                    a {
                        color: var(--white);
                    }
                }
            }

            .section__title p {
                opacity: 0.66;
            }
        }
    }
}

.c_dark h2,
.c_dark h3,
.c_dark h4,
.c_dark .soustitre,
.c_dark .surtitre,
.c_dark .top,
.c_dark .chiffre_label,
.c_dark span,
.c_dark p,
.c_dark li {
    color: var(--white);
}

.c_dark .bouton {
    background: transparent;
}

.c_dark .bouton::before {
    background: var(--white);
}

.c_dark .bouton:hover {
    color: var(--dark-blue);
}

.c_dark .bouton--alt {
    border-color: var(--white);
    color: var(--white);
}

.c_dark .bouton--alt:hover {
    border-color: var(--blue);
}

.section__title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-bottom: 24px;
    text-align: center;
}

.section__title p {
    margin: 0 auto;
    max-width: 960px;
    font-weight: var(--light);
}

.container-limited {
    @media (min-width: 992px) {
        max-width: 1000px;
    }
}