:root {
    /* Fonts */
    --main-font: 'Inter', sans-serif;
    --strong-font: 'Schibsted Grotesk', sans-serif;

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

    /* Colors */
    --white: #fff;
    --clair: #F5FAFF;
    --grey: #DCE6F0;
    --red: #E60A44;
    --blue: #5078F0;
    --yellow: #FAC864;
    --violet: #A078F0;
    --dark-blue1: #304890;
    --dark-blue2: #202f77;
    --dark-blue3: #101830;
    --dark: #080C18;
    --bs-link-color: #5078F0;

    /* Others */
    --border-radius: 21px;
    --transition: all 0.3s ease;
    --radial-gradient: radial-gradient(circle, rgba(48, 72, 144, 0.5) 0%, rgba(16, 24, 48, 0) 35%);
}

html {
    /* overflow-x: hidden; */
    scroll-behavior: smooth;
}

body {
    background-color: var(--clair);
    overflow-x: hidden;
}

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

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

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: 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: 50px;
}

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

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

    span[style="color: #5078f0;"] {
        font-family: var(--strong-font);
        font-style: italic;
    }

    & strong {
        color: var(--blue);
        font-family: var(--strong-font);
        font-weight: var(--semibold);
        font-style: italic;
    }
}



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

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

    span[style="color: #5078f0;"] {
        font-family: var(--strong-font);
        font-style: italic;
    }
}

h2.style-article {
    font-size: 24px;
    line-height: 32px;
    color: var(--bs-link-color);
}

h3,
.h3_like {
    font-family: var(--main-font);
    font-size: 20px;
    line-height: 24px;

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

    span[style="color: #5078f0;"] {
        font-family: var(--strong-font);
        font-style: italic;
    }
}

h4,
.h4_like {
    font-family: var(--main-font);
    font-size: 18px;
    line-height: 22px;

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

    span[style="color: #5078f0;"] {
        font-family: var(--strong-font);
        font-style: italic;
    }
}

h5,
.h5_like {
    font-family: var(--main-font);
    font-size: 16px;
    line-height: 22px;

    span[style="color: #5078f0;"] {
        font-family: var(--strong-font);
        font-style: italic;
    }
}

p,
li {
    font-family: var(--main-font);
    font-size: 14px;
    line-height: 17px;
    margin-bottom: 10px;
}

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

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

    &:hover {
        background-color: #C4083A;
        border: 1px solid #C4083A;
        color: var(--white);
    }
}

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

    &:hover {
        background-color: #3B5ED8;
        border: 1px solid #3B5ED8;
        color: var(--white);
    }
}

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

    &:hover {
        background-color: #3B5ED8;
        border: 1px solid #3B5ED8;
        color: var(--white);
    }
}

.bouton--alt--rouge {
    background-color: transparent;
    border: 1px solid #E60A44;
    color: var(--red);
    font-weight: var(--semibold);
    text-decoration: none;
    transition: var(--transition);
    display: inline-block;
    padding: 10px 20px;
    border-radius: var(--border-radius);
    font-size: 14px;

    &:hover {
        background-color: #C4083A;
        border: 1px solid #C4083A;
        color: var(--white);
    }
}

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

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

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

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

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

.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 {
    font-weight: var(--semibold);
    text-decoration: none;
    transition: var(--transition);
    display: inline-block;
    padding: 10px 20px;
    border-radius: var(--border-radius);
    font-size: 14px;
    background: var(--clair);
    border: 1px solid var(--blue);
    color: var(--dark);

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

section.builder[data-color="#202f77"] {
    background: #202f77;

    h1,
    h2,
    h3,
    h4,
    p,
    li,
    a,
    span:not([style="color: #5078f0;"], [style="color: #080c18;"], [style="color: #101830;"], [style="color: #202f77;"], [style="color: #e60a44"]) {
        color: var(--white) !important;
    }

    a:hover {
        text-decoration: none;
    }
}

section.builder[data-color="#101830"] {
    background: #101830;

    h1,
    h2,
    h3,
    h4,
    p,
    li,
    span:not([style="color: #5078f0;"], [style="color: #080c18;"], [style="color: #101830;"], [style="color: #202f77;"], [style="color: #e60a44"]) {
        color: var(--white) !important;
    }

}

body:not(.form_hdp) {
    section.builder[data-color="#080c18"] {
        position: relative;
        background: #080c18;

        &:not(.galerie) {
            overflow: hidden;
        }

        &:not([data-color="#080c18"] + &) {
            &:before {
                content: '';
                position: absolute;
                top: 0;
                left: 50%;
                width: 75%;
                height: 75%;
                transform: translateX(-50%);
                z-index: 0;
                pointer-events: none;
                background: radial-gradient(ellipse at center top, var(--blue) -100%, var(--dark-blue1) -25%, transparent 35%);
            }
        }
            
        .container {
            position: relative;
            z-index: 1;
        }

        h1,
        h2,
        h3,
        h4,
        p,
        span:not(:has(strong), [style="color: #080c18;"], [style="color: #101830;"], [style="color: #202f77;"]),
        li {
            color: var(--white);
        }
    }
}